如何通过jQuery中的父div来防止click（）事件？ [英] How to prevent a click() event through a child div to a parent div in jQuery?

问题描述

情况：

<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（）事件关闭内容。
这个关闭按钮只能通过点击大标题才能看到。

Header DIV is a 'big button' with jQuery click() event for opening the content. The close DIV is inside the big header DIV and represents the close button also with click() event to close the content. This close button is only visible by clicking on the big header.

点击标题并对内容进行反应，但是点击关闭按钮，可以将点击事件通过标题DIV。内容关闭并再次打开两个点击事件。

Clickng on the header and oppening the content works as expecting but clicking on the close button let the click event through to the header DIV. The content closes and opens again beacause of two click events.

那么如何正确设计整个事情来使关闭按钮牢固，以防止点击它到头？

So how can i design the whole thing properly to make the close button solid and to prevent click through it to the header?

推荐答案

您需要停止事件传播 DOM树：

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

    // Your code here
});

这篇关于如何通过jQuery中的父div来防止click（）事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！