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?

Answer 1

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.

Answer 2

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;
}