情况:
<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()事件关闭内容。
这个关闭按钮只有通过点击大标题才能看到。
点击标题并对内容进行操作,如期望,但点击关闭按钮让点击事件通过标题DIV。内容关闭并再次打开两次点击事件。
那么我如何正确设计整个事情,使关闭按钮牢固,并防止点击它到标题?
解决方法
你需要在
stop the event from propagating上添加DOM树:
$('.closeBtn').click(function (evt) {
evt.stopPropagation();
// Your code here
});