Question

我将事件设置为wrapper div，但在此div中，我有一些buttons，我怎样才能阻止这个wrapper事件发生在buttons？

HTML ：

<div class="wrapper-alert"> <!-- click here will pop-up -->
   <div class="somethingElse"> <!-- click here will pop-up -->
      Some text            
   </div>
   <div class="this-is-my-action">
      <button class="inside-alert">Inside</button> <!-- click here will NOT pop-up-->
   </div>
   <div class="somethingElseTo"> <!-- click here will pop-up -->
      Some text            
   </div>
</div>

我让jsfiddle更清楚。

所以，基本上，如果我点击wrapper-alert会弹出一些消息，但如果我点击button其他事情就会发生，问题是按钮是来自包装的孩子，所以有2个事件会同时发射。

我尝试使用if (e.target !== this) return;，但只能使用一个children或一些基本结构。

Answer 1

您可以使用stopPropagation方法。

防止事件冒泡DOM树，防止任何父处理程序被通知事件。

$(".inside-alert").on("click", function(event){
     event.stopPropagation()
     alert('this is my BUTTON' + event.target); // dont pop-up anything
});

防止在子元素中发生单击

1 个答案: