jquery - このシナリオで「伝播」を停止するにはどうすればよいですか?

Question

<div id="container">
    <div id="link">Link</div>
</div>

$('#link').click(function (e) {
    console.log("link");                
});

$('#container').mousedown(function (e) {
    console.log("container");                
});

#linkをクリックすると、#containerハンドラーが起動しないようにしたいと思います。stopPropagation()またはを試しpreventDefault()ましたが、アプローチが間違っていると思いますか?

score 2 · Accepted Answer

ハンドラーはmousedownハンドラーの前に起動するため、イベントが既に親要素にバブルアップしているため、ハンドラーからハンドラーをclickキャンセルすることはできません。mousedownclickmousedown

mousedown他のハンドラーを変更せずに、内部要素にハンドラーを追加して、mousedownイベントの伝播を停止します。

$('#link').click(function (e) {
    console.log("link");
}).mousedown(function (e) { //stops the mousedown event propagation from reaching
    e.stopPropagation();   //the parent element
});

$('#container').mousedown(function (e) {
    console.log("container");
});

フィドル

ハンドラーを切り替えて同じイベント (例: both ) を処理できる場合は、上記のハンドラーで行ったように、内側の要素のハンドラーからclick呼び出すことができます。event.stopPropagation()mousedown