こんにちは!
今回は「Javascriptで親要素onclickの中に子要素onclickを記述し、誤発火を防ぐ方法」についてお伝えしたいと思います。
普通に親要素にonclickイベント、子要素にも別のonclickイベントを記述すると、子要素をクリックしたときに親要素のクリックイベントも発火してしまうので対策を示したいと思います。
子要素をクリックした時、親要素のonclickの誤発火を防ぐ方法
ポイント
event.stopPropagation()
で親要素のonclickイベントを発火させない
まずは以下の具体例をご覧ください。
※わかりやすさ重視のため、一つのHTMLファイル内にcssとjavascriptも記述しております。
修正前のコード
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.parent {
background-color: pink;
}
.child {
background-color: lightblue;
width: 50%;
height: 50%;
margin: auto;
}
</style>
</head>
<body>
<div class="parent" onclick="handleClickParent(event)" >
親要素
<div class="child" onclick="handleClickChild(event)" >
子要素
</div>
</div>
<script>
const handleClickParent = (event) => {
alert('親要素クリックイベントが呼ばれました');
};
const handleClickChild = (event) => {
alert('子要素クリックイベントが呼ばれました');
};
</script>
</body>
</html>