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

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内容按预期工作,但单击关闭按钮让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,