javascript - jQuery event contextmenu triggers underlaying div - Stack Overflow

admin管理员组

文章数量:1390399

looking at this event (being bind on 2 divs overlapping each other, look at the jsfiddle)

.on('contextmenu', function() { ... });

1. Why do both divs being triggered?
2. How can I detect this and or stop the underlaying div from triggering?

DEMO: jsfiddle

Thanks for any information!

looking at this event (being bind on 2 divs overlapping each other, look at the jsfiddle)

.on('contextmenu', function() { ... });

1. Why do both divs being triggered?
2. How can I detect this and or stop the underlaying div from triggering?

DEMO: jsfiddle

Thanks for any information!

• javascript
• contextmenu
• jquery

Share Improve this question Follow asked Sep 17, 2013 at 14:01 peipst9lkerpeipst9lker 60511 gold badge55 silver badges1717 bronze badges 1

• @A. Wolff - you are right. Deleted the answer. return false hides the default behaviour as well. – davidkonrad Commented Sep 17, 2013 at 14:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

On nested element, you need to stop event bubbling:

$('#div2').on('contextmenu', function(e) {
    e.stopPropagation();
    $('#log').append('<p>div2 triggered contextmenu!</p>');
});

DEMO

DEMO

$('#div1,#div2').on('contextmenu', function (e) {
    e.stopPropagation();
    $('#log').append('<p>' + e.target.id + ' triggered contextmenu!</p>');
});

event.target

event.stopPropagation/

You need to prevent event from propogating, try this code:

$('#div1').on('contextmenu', function(e) {
if(!e.isDefaultPrevented()){
    $('#log').append('<p>div1 triggered contextmenu!</p>');
    e.preventDefault();
}
});

$('#div2').on('contextmenu', function(e) {
if(!e.isDefaultPrevented()){
    $('#log').append('<p>div2 triggered contextmenu!</p>');
    e.preventDefault();
}
});

本文标签： javascriptjQuery event contextmenu triggers underlaying divStack Overflow