event.stopPropagation()

イベントの伝播を停止

<div id="parent">
<button id="button">ボタンを押す</button>
</div>

<script>
const button = document.getElementById('button');

// 親要素を取得
const parentDiv = document.getElementById('parent');

const message = function() {
event.stopPropagation();
alert('ボタンが押されました');
}

// ボタンにイベントリスナーを追加
button.addEventListener('click', message);

// 親要素にもイベントリスナーを追加
parentDiv.addEventListener('click', message);
</script>

↓実行すると

event.stopPropagation()がない場合はボタンを押すボタンを押した場合、伝播してアラートが2回表示されます。

コメント