Question

我有一种情况，当我右键点击一个带有types_list_button类的div时，我需要触发一个事件，但是在该div中是另一个具有类hover_point的div，其中我不想要当他们点击该div时要触发的事件。这可能吗？

我不确定我是否可以将:not用于我正在使用的此类事件处理程序。

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>

Answer 1

只需检查事件处理程序内target of the Event object中的类：

$(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>

Answer 2

怎么样......

＆＃13;

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

＆＃13;

<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>

＆＃13;

右键单击（contextmenu）在div类上，但不在子div类上

2 个答案: