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

Question

我有父节点和子节点。他们都有“点击”事件监听器。由于 <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');
});

Answer 1

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

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

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