1. ホーム
  2. javascript

[解決済み] 子要素のクリックイベントが親要素のクリックイベントを誘発する

2023-06-29 07:44:01

質問

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

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

を発動させたくないので parentDiv をクリックしたときに childDiv をクリックしたときにクリックイベントを発生させたいのですが、どうすればよいのでしょうか?

更新

また、この2つのイベントの実行順序はどのようになりますか?

どのように解決するのですか?

あなたは イベント.stopPropagation()

ライブデモ

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

イベント.stopPropagation()

説明 イベントが DOM ツリー上にバブリングするのを防ぎます。 親ハンドラがイベントの通知を受けることを防ぎます。