jquery - 防止在子元素中发生点击

Question

我将一个事件设置为a 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
});