CODEWITHSUNDEEP
javascriptjqueryfirefox
Tom Allard
Tom Allard

Reputation: 61

Firefox strange right click event bubbling behavior

I'm experiencing a strange issue in firefox where the click event is raised on the document node when right-clicking a child node.

This code illustrates the issue: 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><span>Test</span></div>

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

How can i prevent this event from being raised in Firefox?

This does not work:

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

Upvotes: 4

Views: 1231

Answers (3)

Theodore Brown
Theodore Brown

Reputation: 957

This can be fixed by using event.which to check which mouse button was pressed (from the event listener attached to the document). See https://stackoverflow.com/a/12430795/1170489.

Upvotes: 1

opike
opike

Reputation: 7585

I'm running into the same issue. I have a fiddle where if you left click in the green square the event is handled by both handler2 (on the div) and handler3 (on document). However if you right click, only handler3 is called, which means there isn't an easy way to stop propagation on right clicks in the 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 around with the settings dom.event.contextmenu.enabled and services.sync.prefs.sync.dom.event.contextmenu.enabled, but they had no effect on this behavior.

Upvotes: 1

Kamil T
Kamil T

Reputation: 2216

Make 

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

the first handler in your script. When you do it your way, the document click handler is hiding the span and div handlers.

Upvotes: 0

Related Questions