I wonder how to stop the propagation of all types of events when they reach a certain element.

I have thought

function stop(e){
    e.stopPropagation();
}
function stopEvents(el){
    var events = ['click', 'mousemove', ...];
    for(var i=0; i<events.length; ++i){
        el.addEventListener(events[i], stop, false);
    }
}

Is there a smarter way?

It seems that my code works, but I would like a code that doesn't require a list of all possible events.

Because if I write a GreaseMonkey module which other people can use to add content to pages, I don't want events generated inside that content to trigger page's event listeners (assuming they don't use capture). Actually I solved it using iframes, but the question remains for academic purposes

I wonder how to stop the propagation of all types of events when they reach a certain element.

I have thought

function stop(e){
    e.stopPropagation();
}
function stopEvents(el){
    var events = ['click', 'mousemove', ...];
    for(var i=0; i<events.length; ++i){
        el.addEventListener(events[i], stop, false);
    }
}

Is there a smarter way?

It seems that my code works, but I would like a code that doesn't require a list of all possible events.

Because if I write a GreaseMonkey module which other people can use to add content to pages, I don't want events generated inside that content to trigger page's event listeners (assuming they don't use capture). Actually I solved it using iframes, but the question remains for academic purposes

• javascript
• dom
• dom-events
• stoppropagation

Share Improve this question Follow edited Feb 11, 2021 at 14:51 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jul 15, 2013 at 0:05 OriolOriol 289k7171 gold badges457457 silver badges530530 bronze badges 5

• That looks fine, does it work? – elclanrs Commented Jul 15, 2013 at 0:06
• Listing out all the events might take a while. You should just automate that with JavaScript. – Shawn31313 Commented Jul 15, 2013 at 0:07
• @Shawn31313 How can I get a list of all events? – Oriol Commented Jul 15, 2013 at 0:08
• @adeneo Because if I write a GreaseMonkey module which other people can use to add content to pages, I don't want events generated inside that content to trigger page's event listeners (assuming they don't use capture). Actually I solved it using iframes, but the question remains for academic purposes. – Oriol Commented Jul 15, 2013 at 0:12
• And at the same your GreaseMonkey script will kill all delegated event handlers ? – adeneo Commented Jul 15, 2013 at 0:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

function stop(e){
    e.stopPropagation();
}
function stopEvents(el){
    for(var key in window) {
        if (key.indexOf("on") == 0) {
            el.addEventListener(key.substr(2), stop, false);
        }
    }
}

This is how you could get all of the events.

This could cause some issue though. For example, if you add another key into the window object that starts with on, it will also be considered an "event".

You also have to consider that the window object is large.

I would just use your code. The full list of events would be:

Google Chrome

["deviceorientation", "transitionend", "webkittransitionend", "webkitanimationstart", "webkitanimationiteration", "webkitanimationend", "search", "reset", "waiting", "volumechange", "unload", "timeupdate", "suspend", "submit", "storage", "stalled", "select", "seeking", "seeked", "scroll", "resize", "ratechange", "progress", "popstate", "playing", "play", "pause", "pageshow", "pagehide", "online", "offline", "mousewheel", "mouseup", "mouseover", "mouseout", "mousemove", "mousedown", "message", "loadstart", "loadedmetadata", "loadeddata", "load", "keyup", "keypress", "keydown", "invalid", "input", "hashchange", "focus", "error", "ended", "emptied", "durationchange", "drop", "dragstart", "dragover", "dragleave", "dragenter", "dragend", "drag", "dblclick", "contextmenu", "click", "change", "canplaythrough", "canplay", "blur", "beforeunload", "abort"]

FireFox

["SearchSubmit", "mouseenter", "mouseleave", "afterprint", "beforeprint", "beforeunload", "hashchange", "message", "offline", "online", "popstate", "pagehide", "pageshow", "resize", "unload", "devicemotion", "deviceorientation", "deviceproximity", "userproximity", "devicelight", "abort", "blur", "canplay", "canplaythrough", "change", "click", "contextmenu", "dblclick", "drag", "dragend", "dragenter", "dragleave", "dragover", "dragstart", "drop", "durationchange", "emptied", "ended", "error", "focus", "input", "invalid", "keydown", "keypress", "keyup", "load", "loadeddata", "loadedmetadata", "loadstart", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "mozfullscreenchange", "mozfullscreenerror", "mozpointerlockchange", "mozpointerlockerror", "pause", "play", "playing", "progress", "ratechange", "reset", "scroll", "seeked", "seeking", "select", "show", "stalled", "submit", "suspend", "timeupdate", "volumechange", "waiting", "wheel", "copy", "cut", "paste", "beforescriptexecute", "afterscriptexecute"]

Is there a chance for css on disabled areas?

pointer-events : none;