How to stop propagation of all events

Question

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

Answer 1

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"]

Answer 2

Is there a chance for css on disabled areas?

pointer-events : none;