Question

问题是当我在父元素上附加事件处理程序时。它还附加于子元素。那么，如何将事件仅附加到父级。我试过了stopPropagation()/stopImmediatePropagation()，但都没有效果。

HTML

<div class="circle">
    <ul class="circle-child">
        <li><a href="#"></a></li>
    </ul>
</div>

的JavaScript

$(".circle").click(function() {
    console.log("clicked");
});

这是jsfiddle演示。

Answer 1

该事件仅附加到父级。但从逻辑上讲，由于子元素包含在父元素中，如果单击子元素，则还会单击父元素，处理程序将触发，因为事件会冒泡。

您可以查看this（事件绑定的项目）是否是事件的目标。试试这个：

http://jsfiddle.net/vtVpP/

$(".circle").click(function (e) {
    if (this === e.target) {
        console.log("clicked");
    }
});

Answer 2

您必须将stop stopImmediatePropagation（）应用于子元素。这将停止子元素的事件传播。

$(".circle-child").click(function(e) {
e.stopImmediatePropagation();
})

这里是小提琴http://jsfiddle.net/Gnb25/

Answer 3

你可以这样做

<div class="circle">
    <ul class="circle-child">
        <li><a href="#"></a></li>
    </ul>
</div>  



$(".circle").click(function(e) {
    if($(e.target).is($(this)){
        console.log("clicked");
    }
});

但是这仍然会调用子元素并检查目标是否与侦听器相同

Answer 4

您可以通过检查event.target来检查以确保点击的元素是它应该是的。

$('.circle').click( function(evt) {
    if ( $(evt.target).is('.circle') )
        alert("clicked");
});

以下是修订后的jsfiddle示例。

子元素的JavaScript事件处理程序

4 个答案: