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 に答える