javascript - 子要素の JavaScript イベント ハンドラー

Question

問題は、親要素にイベント ハンドラーをアタッチするときです。子要素にも付けました。では、親のみにイベントをアタッチする方法。試しstopPropagation()/stopImmediatePropagation()ましたが、どちらも機能しません。

HTML

<div class="circle">
    <ul class="circle-child">
        <li><a href="#"></a></li>
    </ul>
</div>  

JavaScript

$(".circle").click(function() {
    console.log("clicked");
});

そして、これがjsfiddleデモです。

Answer 1

イベントは親にのみ関連付けられます。ただし、論理的には、子要素は親に含まれているため、子をクリックすると親もクリックされ、イベントがバブルするためハンドラーが起動します。

this（イベントがバインドされたアイテム）がイベントのターゲットであったかどうかを確認できます。これを試して：

http://jsfiddle.net/vtVpP/

$(".circle").click(function (e) {
    if (this === e.target) {
        console.log("clicked");
    }
});

Answer 2

stop stopImmediatePropagation() を子要素に適用する必要があります。これにより、子要素からのイベントの伝播が停止します。

$(".circle-child").click(function(e) {
e.stopImmediatePropagation();
})

ここにフィドルがありますhttp://jsfiddle.net/Gnb25/

Answer 3

あなたはこれを行うことができます

<div class="circle">
    <ul class="circle-child">
        <li><a href="#"></a></li>
    </ul>
</div>  



$(".circle").click(function(e) {
    if($(e.target).is($(this)){
        console.log("clicked");
    }
});

ただし、これは引き続き子要素を呼び出し、ターゲットがリスナーと同じかどうかを確認します

Answer 4

event.target を確認することで、クリックされた要素が本来あるべきものであることをいつでも確認できます。

$('.circle').click( function(evt) {
    if ( $(evt.target).is('.circle') )
        alert("clicked");
});

修正されたjsfiddleの例を次に示します。