JavaScript stopPropagation()メゾッドで親要素のイベントを実行しない方法

2023年3月28日

環境
Google Chrome　111.0.5563.65
Windows 10 Home 64bit

書式
1.親要素クラスのイベントの定義
document.querySelector(`.親クラス名`).addEventListener(`click`, () => {
処理コード
});

2.子要素クラスのイベントの定義
document.querySelector(`.子クラス名`),addEventListener(`click`, () => {
event.stopPropagation();
});
stopPropagation()メゾッドを使う場合は、子要素にも同じ条件で発火するイベントを登録する必要がありますが、
その親要素のイベントを発生しない。

使用例

<!DOCTYPE html>
<html>
<body>

<style>
/*親要素のCSS*/
.pA {
  width: 150px;
  padding: 30px;
  background: skyblue;
}
/*子要素のCSS*/
.pAa {
  width: 150px;
  height: 100px;
  background:red;
}
</style>

<div class="pA">
  <div class="pAa">子要素</div>
</div>

<script>
/*クリックイベントで親要素のイベントを実行しない*/
document.querySelector(`.pA`).addEventListener(`click`, () => {
      event.currentTarget.style.background = "green";
});
/*クリックイベントで子要素のイベントを実行するい*/
document.querySelector(`.pAa`).addEventListener(`click`, () => {
      event.stopPropagation();
});
</script>

</body>
</html>

実行結果
親要素「class="pA"」をクリックしてイベント登録されている要素の背景色が緑色になります。

JavaScript

Posted by arkgame

関連記事: