web-dev-qa-db-ja.com

子要素クリックイベントは、親クリックイベントをトリガーします

次のようなコードがあるとします。

<html>
<head>
</head>
<body>
   <div id="parentDiv" onclick="alert('parentDiv');">
       <div id="childDiv" onclick="alert('childDiv');">
       </div>   
    </div>
</body>
</html>​

parentDivをクリックしたときにchildDiv clickイベントをトリガーしたくないのですが、どうすればよいですか？

更新済み

また、これら2つのイベントの実行シーケンスは何ですか？

javascriptjquerydhtml
55
Joe.wang

event.stopPropagation（） を使用する必要があります

ライブデモ

$('#childDiv').click(function(event){
    event.stopPropagation();
    alert(event.target.id);
});​

event.stopPropagation（）

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

71
Adil

JQueryなし：DEMO （

 <div id="parentDiv" onclick="alert('parentDiv');">
   <div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
     AAA
   </div>   
</div>
20
Akhil Sekharan

私は同じ問題に直面し、この方法でそれを解決しました。 html：

<div id="parentDiv">
   <div id="childDiv">
     AAA
   </div>
    BBBB
</div>

JS：

$(document).ready(function(){
 $("#parentDiv").click(function(e){
   if(e.target.id=="childDiv"){
     childEvent();
   } else {
     parentEvent();
   }
 });
});

function childEvent(){
    alert("child event");
}

function parentEvent(){
    alert("paren event");
}
7
Kamuran Sönecek

stopPropagation()メソッドは、親要素へのイベントのバブリングを停止し、親ハンドラーにイベントが通知されないようにします。

メソッドevent.isPropagationStopped()を使用して、このメソッドが（そのイベントオブジェクトで）呼び出されたかどうかを知ることができます。

構文：

このメソッドを使用する簡単な構文は次のとおりです。

event.stopPropagation()

例：

$("div").click(function(event) {
    alert("This is : " + $(this).prop('id'));

    // Comment the following to see the difference
    event.stopPropagation();
});​
6
palaѕн

クリックイベントBubbles、バブリングの意味は、開始するのに良いポイントは here です。そのイベントをさらに伝播する必要がない場合は、event.stopPropagation()を使用できます。

また、 MDN を参照するための適切なリンク

3
Pranav