right click (contextmenu) on div class, but not on a child div class

Question

I have a situation where I need to fire an event when right clicked on a div with class types_list_button, but within that div is another div with the class hover_point in which I do not want the event to fire when they are clicking over that div. Is this possible?

I am not sure if I can use :not with this type of event handler I am using.

HTML

<div class="types_list_button">Any where here<div class="hover_point">Not Here</div>Any where here</div>

JQUERY

$(document).on('contextmenu', '.types_list_button', function() {

$(document).on('contextmenu', '.types_list_button', function() {
  alert("test")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="types_list_button">Any where here<div class="hover_point">Not Here</div>Any where here</div>

isapir · Accepted Answer · 2018-01-21T19:48:48.563

2

Just check for the class in the target of the Event object inside the event handler:

$(document).on("contextmenu", ".types_list_button", function(evt) {
  if (!$(evt.target).hasClass("hover_point"))
    alert("test");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="types_list_button" style="margin:1em; padding:1em; background:#fcc;">Anywhere here
  <div class="hover_point" style="margin:1em; padding:1em; background:#cfc;">Not Here</div>
Anywhere here</div>

edited Jan 21 '18 at 19:48

answered Jan 21 '18 at 19:39

isapir

21,295
13
115
116

Happy to be of help :) – isapir Jan 21 '18 at 19:40
Unreal. +1 for clever. – suchislife Jan 21 '18 at 19:41
it will fire the context menu if i click a second time – dippas Jan 21 '18 at 19:52
@dippas The green area is supposed to open the Context Menu. The red area first shows an alert, and then opens the Context Menu. The difference is in the alert, which should not fire in the green area. – isapir Jan 21 '18 at 19:54
Right, misunderstood that, the title say one thing, the question says other thing – dippas Jan 21 '18 at 19:55

score 0 · Answer 2 · answered Jan 21 '18 at 19:28

0

How about...

$(document).on('contextmenu', '.types_list_button', function() {
  alert("test")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="types_list_button">
Any where here
</div>
<div class="hover_point">
Not Here
</div>
<div class="types_list_button">
Any where here
</div>

answered Jan 21 '18 at 19:28

suchislife

4,251
10
47
78

Cant change the HTML – Cesar Bielich Jan 21 '18 at 19:29
It appears that, when there are two events present; that of the child inside that of the parent, the parent event always seems to prevail. – suchislife Jan 21 '18 at 19:35
@Vini - check out Event Propagation in JavaScript, e.g. this SO answer: https://stackoverflow.com/a/4616720/968244 – isapir Jan 21 '18 at 19:52

right click (contextmenu) on div class, but not on a child div class

2 Answers2