JQuery - Stopping Event Bubbling in all Browsers

Question

I have some massively nested GUI controls - when they're clicked or changed or whatever I need to stop the event from going further up the DOM tree. It needs to work across all browsers.

At this point I've got some rather clunky JS code:

//Do something in response to the original user action
//Leave it at that.
try {
        e.stopPropagation();
    }
    catch (ex) {

    }
    try {
        event.cancelBubble();
    }
    catch (ex) {

    }

    try {
        event.preventDefault();
    }
    catch (ex) { }
...

This does work, but it smells and feels wrong (personally I loathe empty catch blocks). Is there a neater x-browser trick I can use?

Felix Kling · Accepted Answer · 2011-02-24T11:46:29.017

5

If you use jQuery then just event.stopPropagation() will work fine. jQuery unifies the event handling.

In general if, you want to test for special browser methods, you can do like so:

if(event.stopPropagation) {
    event.stopPropagation();
}
else if...

This is what jQuery is doing. It creates a wrapper for the event and provides a unified interface.

The name of the event object is defined by you. The event object is passed as first argument to your event handler. You have to setup the event handler to accept a parameter, e.g.:

$('selector').click(function(foo) { // could be event, e, bar, whatever you want
    foo.stopPropagation();
});

Typically e or event are used.

edited Feb 24 '11 at 11:46

answered Feb 24 '11 at 11:33

Felix Kling

795,719
175
1,089
1,143

Ahhh - I was trying to call e.stopPropagation() Thanks v. much that works perfectly. – immutabl Feb 24 '11 at 11:37
@5arx: That depends on the parameter name. If you have `$(....).click(function(e){})`, then you have to call `e.stop...`. – Felix Kling Feb 24 '11 at 11:39
Ok thanks that's good to know. I'm calling the function from a radio button so using $(...).change(function(){...}); i.e no event parameter so I guess 'event' is a global keyword here? – immutabl Feb 24 '11 at 11:46
1

@5arx: Well, it will be treated as global variable, but it will not be defined. As I said, you have to define your function to accept the parameter: `$(...).change(function(e){...});` – Felix Kling Feb 24 '11 at 11:50
@FelixKing and @TimDown Re: http://stackoverflow.com/questions/4522257/how-do-stop-events-bubbling-in-jquery Is @gov's answer correct? Will a simple, old skool 'return false;' cover all bases here ...? – immutabl Feb 24 '11 at 12:05
1

@5arx: @gov's answer there is correct for jQuery, where `return false` calls both `e.stopPropagation()` and `e.preventDefault()`. However, in a DOM event handler, `return false` will do nothing if the event handler was added using `addEventListener()` and is equivalent to calling `e.preventDefault()` only otherwise. – Tim Down Feb 24 '11 at 12:32
@5arx: It does, but calling the functions is more explicit and easier to understand. – Felix Kling Feb 24 '11 at 13:11

score 3 · Answer 2 · answered Feb 24 '11 at 11:41

3

cancelBubble is a Boolean property rather than a method of Event objects. There's no need for try/catch because you can test for the property or method you need before using it. So, without jQuery, the following will do what you want for an event object e:

if (typeof e.stopPropagation != "undefined") {
    e.stopPropagation();
} else if (typeof e.cancelBubble != "undefined") {
    e.cancelBubble = true;
}

answered Feb 24 '11 at 11:41

Tim Down

318,141
75
454
536

I am using JQuery (does anyone do JavaScript dev without it these days? I think not [http://img180.imageshack.us/img180/3305/addanumbertoanothernumb.png]) but thanks for the info. One day I'll look at the JS event model properly. One day ... – immutabl Feb 24 '11 at 11:44
2

@5arx: Actually it is the DOM event model. And understanding it *now* will help you a lot for understanding how events work in general. Have a look at http://www.quirksmode.org/js/introevents.html. And yes JS development is still done without jQuery. It is not the solution for everything. – Felix Kling Feb 24 '11 at 11:48
@5arx: I don't use jQuery: the JavaScript projects I'm working on are somewhat specialized and aren't a good fit for jQuery, plus I've been doing this stuff a long time and know the browser issues. Besides, I like to try and illustrate that life without jQuery isn't that scary. – Tim Down Feb 24 '11 at 11:50
@FelixKing & @TimDown Cheers thanks much. I have resolved to look into DOM events on my next '20% Day'. These days I mostly do serverside coding - my pre-Jquery forays into JS development were all about 'document.getElementById(...) and scary enough! Thanks for the link too, looks good. – immutabl Feb 24 '11 at 11:59

JQuery - Stopping Event Bubbling in all Browsers

2 Answers2