JavaScript addEventListener()で親要素のイベントを実行しないようにする
環境
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>
<!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>
<!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"」をクリックしてイベント登録されている要素の背景色が黄色になります。