jquery - jQueryは、子のイベントがトリガーされたときに親のイベントがトリガーされるのを防ぎます

Question

最近、jQuery でいくつか問題が発生しています。次のような要素があるとしましょう。

<div id="parent1" class="parent">
    <div id="child1" class="children">
        <a href="" id="child_link1" class="child_link"></a>
    </div>
</div>

そして、私は次のようなjQuery関数を持っています:

$(".parent").click(function(){
    alert("parent is clicked");
});

$(".child_link").click(function(){
    alert("child link is clicked");
});

child_link をクリックすると、親もトリガーされます。child_link をクリックしても親がトリガーされない状況を作成するにはどうすればよいですか?

Answer 1

次のように、子クリック イベントで伝播を停止する必要があります。

$(".child_link").click(function(e) {
    e.stopPropagation();
    alert("child link is clicked");
});

フィドルの例

Answer 2

子のイベント ハンドラーは次のように記述します。

$(".child_link").click(function( event ){
    event.stopPropagation();
    alert("child link is clicked");
});

これにより、イベントのバブリングが停止し、親のイベント ハンドラーが呼び出されなくなります。

Answer 3

イベントが親にバブリングしていることを確認してください。したがって、ここで使用する必要があります.stopPropagation();：

$(".child_link").click(function(ev){
  ev.stopPropagation(); //<----------------this stops the event to bubble up
  alert("child link is clicked");
});