jQuery单击函数异常

Question

我正在显示一个容器<div class="expand">- 当点击时 - 展开section下面的容器:

HTML:

<div class="expand">
    <div class="container1">
         <div class="container2">
             <a class="view">View</a>
             <a class="download">Download</a>
         </div>
    </div>
</div>

<section class="hidden">
...
</section>

jQuery的:

$('.expand').click(function () {

   var $this = $(this);
   $this.next().show();

});

正如您所看到的,还有一个"下载"按钮作为子元素<div class="expand">.此下载按钮应该是此容器中唯一不会触发显示所述部分的元素.

所以我想做这样的事情:

$('.expand').not(".download").click(function () {
...
});

要么

$('.expand').except(".download").click(function () {
...
});

Answer 1

您也可以使用event.stopPropagation():

$('.download').click(function(event) {
    event.stopPropagation();
}

$('.expand').click(function () {
    ...
});

这将阻止事件在DOM中向父母移动,并触发他们的事件处理程序.