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

Question

情况：

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

视觉上：

|+Open..............................|-Close|..| (header)

|............Content..........................|

Header DIV 是一个带有 jQ​​uery click() 事件的“大按钮”，用于打开内容。 关闭 DIV 位于大标题 DIV 内，代表关闭按钮，还带有 click() 事件来关闭内容。 此关闭按钮仅通过单击大标题可见。

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

那么我如何正确设计整个事情以使关闭按钮固定并防止点击它到标题？

Answer 1

您需要阻止事件在 DOM 树上传播：

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

    // Your code here
});

Answer 2

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

这应该可以解决问题，所以每次你点击关闭它都不会影响你的标题div，

Answer 3

为什么不使用

+ OPEN

而不是父 div。否则从内部 div 点击处理程序返回 false 或 stopPropagation