Question

I’m binding two event handlers to an input field on ‘keydown’. If the enter key has been pressed, the first event handler needs to stop the propagation of the event so that it doesn’t hit the second eventhandler. I’m doing it like so:

if (jQuery.browser.msie) {
                    event.cancelBubble = true;
                } else {
                    event.stopPropagation();
                }

now this alone doesn’t stop the event propagation either in IE or Firefox. It hits the first event handler, and then hits the second event handler as well. However, in the second event handler, I can actually check if (e.cancelBubble) in case of IE. Is there a way to check the same with Firefox?

Answer 1

Just remove your test for IE and use this:

event.stopImmediatePropagation();

Which will keep other events from firing in both browsers.

event.stopPropagation() will keep events from bubbling, but won’t keep other event handlers for the same object from firing.

To answer your other question, if you just used event.stopPropagation() you could check event.isPropagationStopped() in the second handler.

Suggestion: as a general rule jQuery fully abstracts all browsers behavior to provide a single interface to the functionality. If you find yourself running if(jQuery.browser.msie) before running a jQuery function, there is probably a better way to run it that will work cross browser. And, when you do need to test, you should use jQuery.support to test for functionality not specific browser sniffing.