上一篇: jquery – 删除最近的空兄弟姐妹下一篇:jquery – 获取隐藏图像的高度？

jquery – 防止在children元素中发生单击

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 防止在children元素中发生单击，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我将一个事件设置为包装器div,但在这个div中,我有一些按钮,我怎么能阻止这个包装器事件发生在按钮中？

<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更清楚.

所以,基本上,如果我点击包装警报会弹出一些消息,但如果我点击按钮会发生其他事情,问题是按钮是来自包装器的子项,所以2个事件会一次触发.

我试着用if(e.target！== this)返回;但只适用于一个孩子,或一些基本结构.

解决方法

您可以使用stopPropagation方法.

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