5

次のマークアップがあります。

<ul>
    <li class="tgt"><img src="http://placehold.it/48x48" width="48px" height="48px"></li>
    <li class="tgt"><img src="http://placehold.it/48x48" width="48px" height="48px"></li>
    <li class="tgt"><img src="http://placehold.it/48x48" width="48px" height="48px"></li>
</ul>

フィドルからのコード:

$('.tgt').on('click', function (e) {
    if ($(e.target).hasClass('tgt')) {
        $(e.target).addClass('active');
    }
});

jquery のイベント委任を使用して、すべての .tgt 要素にクリック ハンドラーをアタッチします。何らかの理由で、画像をクリックしても、イベントが li までバブルアップしません。代わりに、イベント ターゲットが画像であることが明らかになります。

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

イベントが li.tgt にバブリングしないのはなぜですか?

4

4 に答える 4

10

イベントはバブリングしていますが、テストしているターゲットe.target要素は、ここで確認できるように実際にクリックされた要素です: http://jsfiddle.net/CgC4V/1/

これが、イベント バブリングが機能するはずの方法です。イベントがバブリングしない場合、li 要素にアタッチされたハンドラーはトリガーされません。

thisクリックされた li を参照するために使用できます。

$('.tgt').on('click', function (e) {
    $('.active').removeClass('active');
    if ($(this).hasClass('tgt')) {
        $(this).addClass('active');
    }
});

tgtただし、元々そのクラスを持っていた li 要素の 1 つである必要があることは既にわかっているため、要素がクラスを持っているかどうかをテストする必要はおそらくありません。

デモ: http://jsfiddle.net/CgC4V/3/

コメントの更新:

「代わりにjquery.event.currentTargetにアクセスする必要がありますか?コンテキストがjquery要素ではない場合はどうなりますか?jQuery.eventのどのプロパティが正しい要素への参照を持っていますか?」

はい、event.currentTarget正しい要素を提供します。「通常」、およびあなたが示したコードではevent.currentTarget、 と同じthisですが、の値を変更するために何かを行うthis場合 (たとえば、$.proxy()orを使用した場合Function.prototype.bind()) はevent.currentTarget、正しい要素を提供します。

event.currentTargetと同じ要素になることもあることに注意してくださいevent.target（this変更していない場合this）。例では、画像ではなくli要素の「ドット」をクリックすると、ターゲットはli自体になります。

于 2013-09-17T20:50:02.283 に答える
1 
$('img').on('click', function (e) {
    if ($(e.target).parent('li').hasClass('tgt')) {
        $(e.target).parent('li').addClass('active');
    }
});

これによりimg、実際のターゲットが作成されますが、リスト項目全体が強調表示されます。

于 2013-09-17T20:52:51.280 に答える