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..........................|

标题DIV是一个用于打开内容的jQuery click（）事件的“大按钮”。关闭的DIV位于大标题DIV内部，代表关闭按钮，还有click（）事件来关闭内容。只有点击大标题才能看到关闭按钮。

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

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

Answer 1

你需要stop the event from propagating在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

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

如何防止click（）事件通过子div到jQuery中的父div？

3 个答案: