javascript - JQueryでイベントを選択的にトリガーする方法は?

Question

質問：

HTML:

<div id="main">
    hello main 
    <div id="sub"> hello sub </div>
</div>

JS:

$("#main").on("click", function() {alert("main");});
$("#sub").on("click", function() {alert("sub");});

ここで、「こんにちはサブ」テキストをクリックすると、「サブ」のみを表示したいときに、サブとメインの 2 つのアラートがトリガーされます。どうすればこれを達成できますか?

Answer 1

イベント ハンドラーでevent.stopPropagationを使用して、階層ツリーの上方へのイベントの伝播を停止できます。subDOM

ライブデモ

$("#main").on("click", function() {alert("main");});
$("#sub").on("click", function(event) {event.stopPropagation();alert("sub");});

Answer 2

要素の伝播を停止することに加えて、クリックされた要素が実際にあったかどうか#subをイベントハンドラー内でチェックすることができます。#main#main

$("#main").on("click", function(e) {
    if (e.target === this)  alert("main");
});

フィドル

Answer 3

$("#sub").on("click", function(e) { //pass in event as "e"
    e.stopPropagation(); //stop propagation from bubbling to the next element.
    alert("sub");
});