2

我有父节点和子节点。他们都有“点击”事件监听器。由于 <a> 是子元素,如果不单击父 <div> 就无法单击它,因此总是会触发父 <div> 的事件。如何在不触发父元素 <div> 的情况下获取子元素 <a> 的事件?这是jsFiddle和代码:
HTML

<div id="container">
    <a href="" id="link"></a>
</div>

CSS:

#container {
    width:100px;
    height:100px;
    background:blue;
    position:relative;
    cursor:pointer;
}
#link {
    width:20px;
    height:20px;
    background:green;
    position:absolute;
    top:10px;
    left:10px;
}

JS:

$('#container').on('click', function() {
alert('container');
});
$('#link').on('click', function() {
alert('link');
});
4

1 回答 1

3

如果您不想将事件传播到容器,请使用stopPropagation

$('#container').on('click', function() {
    alert('container');
});
$('#link').on('click', function(e) {
    alert('link');
    e.stopPropagation();
});

(如果您不想触发链接的默认行为,请替换 e.stopPropagation();return false;

于 2013-08-17T18:41:12.537 回答