如何防止通过子 div 到 jQuery 中的父 div 的 click() 事件？答案

【问题标题】：How to prevent a click() event through a child div to a parent div in jQuery?如何防止通过子 div 到 jQuery 中的父 div 的 click() 事件？
【发布时间】：2011-12-11 18:07:40
【问题描述】：

情况：

<div class="header">
    <div style="float: left;" class="headerTitle">+ OPEN</div>
    <div class="closeBtn" style="float: right;">- CLOSE</div>
 </div> 
<div class="touristenContent">.....</div>

视觉上：

|+打开..................|-关闭|..| （标题）

|…………内容………………|

Header DIV 是一个带有 jQuery click() 事件的“大按钮”，用于打开内容。关闭 DIV 位于大标题 DIV 内，代表 关闭按钮 也带有 click() 事件以关闭内容。这个关闭按钮只有通过点击大标题才能看到。

点击标题并打开内容按预期工作，但点击关闭按钮让点击事件通过标题DIV。由于两次点击事件，内容关闭并再次打开。

那么我怎样才能正确地设计整个事情以使 关闭按钮 稳固并防止点击它进入标题？

【问题讨论】：

并不是每个关于 Stack Overflow 的 JavaScript 问题都需要在 jsfiddle.net 上演示。虽然它确实有助于解决许多问题，但我开始感觉到一些用户认为它是强制性的。不确定谁投了反对票，但这是一个没有 jsfiddle 支持的完全有效的问题。

标签： jquery events click

【解决方案1】：

为什么不用<div style="float: left;" class="headerTitle">+ OPEN</div> 而不是父 div 来挂钩 open 事件。否则 return false 或 stopPropagation 来自内部 div 点击处理程序

【讨论】：

【解决方案2】：

$('.closeBtn').click(function (event){
   event.stopPropagation();
   //   ... your code here
   return false;
});

这应该可以解决问题，因此每次单击关闭都不会影响您的标题 div，

【讨论】：

非常感谢！ 'return false;' 重要吗？最后？
@PaulGeisler: return false; 也会取消浏览器的默认操作。在这种情况下，单击<div> 元素没有默认操作，因此没有必要。
如果要取消默认动作，event.preventDefault() 是正确的方法，至少在2016年是这样。
没有return false;，该解决方案对我不起作用

【解决方案3】：

你需要 stop the event from propagating 向上 DOM 树：

$('.closeBtn').click(function (evt) {
    evt.stopPropagation();

    // Your code here
});

【讨论】：