Question

我有父节点和子节点。他们都有'点击'事件列表。由于＆lt; a＆gt;是子元素，我不能点击它而不点击父＆lt; div＆amp; gt，所以总是父亲的事件＆lt; div＆gt;被触发了。如何获取子元素＆lt; a＆gt;的事件？没有触发父亲＆lt; div＆gt;？这是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');
});

Answer 1

如果您不希望将事件传播到容器，请使用stopPropagation：

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

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

获取子元素的事件而不触发父母的相同事件

1 个答案: