CODEWITHSUNDEEP
javascriptcontextmenujquery
peipst9lker
peipst9lker

Reputation: 605

jQuery event contextmenu triggers underlaying div

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!

Upvotes: 2

Views: 4429

Answers (3)

Dharmesh Patel
Dharmesh Patel

Reputation: 1891

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

Upvotes: 1

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

DEMO

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

event.target

event.stopPropagation/

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

On nested element, you need to stop event bubbling:

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

DEMO

Upvotes: 4

Related Questions