83

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

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

parentDivをクリックしたときにクリック イベントをトリガーしたくありませんchildDiv。どうすればよいですか?

更新しました

また、これら2つのイベントの実行順序は?

4

5 に答える 5

106

event.stopPropagation()を使用する必要があります

ライブデモ

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

event.stopPropagation()

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

于 2012-12-20T06:52:54.900 に答える
24

jQuery なし:デモ

 <div id="parentDiv" onclick="alert('parentDiv');">
   <div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
     AAA
   </div>   
</div>
于 2012-12-20T06:55:27.630 に答える
9

私は同じ問題に直面し、この方法で解決しました。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");
}
于 2015-11-23T12:35:08.043 に答える
6

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

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

構文：

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

event.stopPropagation()

例：

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

    // Comment the following to see the difference
    event.stopPropagation();
});​
于 2012-12-20T06:56:53.543 に答える
5

イベントBubblesをクリックします。これで、バブリングの意味がわかります。開始するのに適したポイントはここです。event.stopPropagation()そのイベントをさらに伝播させたくない場合は、を使用できます。

MDNで参照するための良いリンクでもあります

于 2012-12-20T07:00:26.410 に答える