5

重複の可能性:
jQuery: クリック関数で子を除外します。

次のような 2 つdivの s があります。

<div id="parent" style="width: 100%; height: 100%; background-color:red;" />
    <h1>I'm the parent!</h1>
    <div id="child" style="width: 300px; height: 200px; background-color:yellow;">
        </h2>..and I'm the child!</h2>
    </div>
</div>

さらに、次の JavaScript コードがあります。

$(document).ready(function(){
    $('#parent').click(function(){
        alert('Parent was clicked');
    });
});

問題は、childをクリックすると、イベントがトリガーされることです。このイベントを親のみに制限するにはどうすればよいですか?

編集：明確にするために。ユーザーが赤い部分をクリックすると、このアクションがトリガーされます。コメントで述べたように; これh1は親ではありません。Tjirp の答えはうまくいきました。答えには、このソリューションの実用的なバリエーションがたくさんあります。

4

6 に答える 6

12

これはうまくいくはずです

$(document).ready(function() {
    $('#parent').click(function(e) {
        if (e.target == this) { 
            alert('Parent was clicked');
        }
    }
}

この方法では、子供に何もバインドする必要はありません。クリック イベントはクリック ハンドラーに伝達され、クリック イベントのターゲットが実際にイベントを追加した要素であるかどうかを確認します。

編集：私は正しかった。これは最も効率的な方法ではありません。Alessandro Minoccheri の回答の方がはるかに高速です。私は自分のコードを彼のもので更新しました。

于 2013-01-31T14:01:09.977 に答える
5

これを試して：

$('#parent').click(function(data, handler){
  if (data.target == this) {
    //Do Stuff (only element clicked, not children)
  }
});
于 2013-01-31T14:02:18.413 に答える
1

h1 は親ではなく、div#parent が親です。div#child をクリックすると、イベントのバブリングにより div#parent のクリックがトリガーされます。これにより、イベントのバブリングが防止されます。

$('#child').on("click", function() {
    return false;
});
于 2013-01-31T14:00:45.887 に答える
1

最も簡単な解決策は、イベントを発生させた要素 ( event.target) が、クリック イベント ハンドラーを処理する要素 ( ) と同じであることを確認することthisです。

$('#parent').click(function(event){
    if(this === event.target) {
        alert('Parent was clicked');
    }
});

これは動作中のjsFiddleです。

于 2013-01-31T14:02:50.010 に答える
0 
$(document).ready(function(){
  $('#parent').click(function(){
    if($(this).not("#parent")) {
      return false;
    } else {
      alert('Parent was clicked');
    };
  });
});
于 2013-01-31T14:08:50.320 に答える
0

次のようなものを試すことができます：

$(document).ready(function(){
    $('#parent h1').click(function(){
        alert('Parent was clicked');
    });
});
于 2013-01-31T14:00:55.370 に答える