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

Question

我将一个事件设置为wrapper div，但在这个div内，我有一些按钮，我如何阻止这个wrapper事件发生在按钮中？

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，就会弹出一些消息，但如果我点击按钮，就会发生其他事情，问题是按钮是包装器的子按钮，因此会同时触发 2 个事件。

我尝试过使用 if (e.target !== this) return; 但仅适用于一个 children 或一些基本结构。

Answer 1

您可以使用stopPropagation方法。

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

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