JavaScript addEventListener()で親要素のイベントを実行しないようにする

2023年3月28日

環境
Google Chrome　111.0.5563.65
Windows 10 Home 64bit

書式
1.event.target
イベントが発生した要素
2.event.currentTarget
イベントが登録されている要素
3.親要素のイベントの登録
document.querySelector(`.親クラス`).addEventListener(`click`,() => {処理コード

使用例

<!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`,() => {
     if(event.target == event.currentTarget) {
      event.currentTarget.style.background ="yellow";
     }
});
</script>

</body>
</html>

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

JavaScript

Posted by arkgame

関連記事: