子元素上的 JavaScript 事件处理程序

JavaScript Event Handler on child elements

本文关键字：事件处理 程序 JavaScript 元素      更新时间：2023-09-26

问题是当我在父元素上附加事件处理程序时。它还附加到子元素。那么，如何将事件仅附加到父级。我试过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演示。

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

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

http://jsfiddle.net/vtVpP/

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

stop stopImmediatePropagation（） 应用于子元素。 这将停止从子元素传播事件。

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

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

你可以这样做

<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");
    }
});

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

您可以随时通过检查 event.target 来检查以确保单击的元素是它应该的样子。

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

下面是一个修订后的 jsfiddle 示例。

相关文章：