Stunning Firefox Browser Behavior

Question

I had a strange problem in firefox where the click event appears in a node document when I right-click on a child of a node element.

This code illustrates the problem: http://jsfiddle.net/RyDZU/5/

Updated version: http://jsfiddle.net/RyDZU/10/

$(document).on("click","span",function(e) { console.log('span'); console.log(e.isPropagationStopped()); }); $(document).on("click","div",function(e) { console.log('div'); console.log(e.isPropagationStopped()); e.stopPropagation(); console.log(e.isPropagationStopped()); }); $(document).on("click",function(e) { console.log('body'); console.log(e.isPropagationStopped()); }); 

HTML: <& DIV GT; <& duration GT; Test </ & duration GT; </DIV>

If you right-click the word "test", the word "body" will be printed in the console on firefox (21). Not in IE 10 / Chrome.

How can I prevent this event in Firefox?

This does not work:

 $("body").on("click", "span", function(e) { e.preventDefault(); e.stopPropagation(); }); 

Answer 1

I ran into the same problem. I have a fiddle where, if you leave a click on the green square, the event is handled both by handler2 (on the div) and handler3 (according to the document). However, if you right-click, only handler3 is called, which means that there is no easy way to stop the spread when you right-click in a div.

jsfiddle

 // requisite jsfiddle code snippet function handler2() { console.log('in handler2'); } function handler3() { console.log('in handler3'); } $(document).ready(function () { $('#block2').on('click', handler2); $(document).on('click', handler3); }); 

I also tried playing with the settings dom.event.contextmenu.enabled and services.sync.prefs.sync.dom.event.contextmenu.enabled, but they did not affect this behavior.

Answer 2

This can be fixed using event.which to check which mouse button was clicked (from the event listener attached to the document). See fooobar.com/questions/1484213 / ....

Answer 3

Do

 $(document).on("click",function(e) { console.log('body'); console.log(e.isPropagationStopped()); }); 

first handler in the script. When you do this in your own way, the document click handler hides the span and div handlers.