web-dev-qa-db-ja.com

親のjQueryクリックイベント、ただし子（クリック）要素の検索

それ自体の中に非常に多くのネストされた子要素を持つ親要素があるとしましょう：

<div id="p">
    <div id="c1">
        <div id="c2"></div>
        <div id="c3"></div>
    </div id="c4">
        <div id="c5"></div>
    </div>
</div>

親のclickイベントを既にバインドしています：

$('#p').bind('click', function() {
    alert($(this).attr('id'));
});

イベントは親要素に割り当てられているため、常に親IDが表示されますが、この子要素のどれがクリックされたかを知る方法はないのでしょうか？

また、子要素にイベントを割り当てたり、親divからイベントリスナーを削除することもできません。

javascriptjqueryeventsdom
38
Mahdi

イベントをトリガーしたアイテムを取得するには、イベントオブジェクトを関数に渡す必要があります。event.targetはソース要素を提供します。

ライブデモ

_ $('#p').bind('click', function(event) {
    alert(event.target.id);
 });
_

または

ライブデモ

_$('#p').bind('click', function(event) {
    alert($(event.target).attr('id'));
});
_

編集

最初のメソッド_event.target.id_は、パフォーマンス、単純さ、および読みやすさのために、2番目の$(event.target).attr('id')よりも優先されます。

57
Adil

以下のコードを試すことができます。 jsfiddleも試してみてください（デモ）。

$('#p').on('click', function(event) {
    alert(event.target.id);
});​

デモを試してください

2番目の質問に対する答えは、イベントを子に割り当て、その親から削除することができるということです。これをチェックしてください。

.stopPropagation();

イベントがDOMツリーをバブリングするのを防ぎ、親ハンドラーにイベントが通知されないようにします。 続きを読む

特定のイベントのみを実行し、他のイベントの発生を許可しない場合は、以下のコードを使用します

event.stopImmediatePropagation()

残りのハンドラーが実行されないようにし、イベントがDOMツリーをバブリングするのを防ぎます。 続きを読む

これで問題が解決することを願っています。ご不明な点がございましたら、お気軽にお問い合わせください。ありがとう

7
Techie

要素に孫がいる場合は、子だけを取得するより良い方法があります。大なり記号に注意してください。

$('.parent > .child').click(function() {
    // This will be the child even if grandchild is clicked
    console.log($(this));
});
1
Eddie