「JavaScript」stopPropagationメソッドで発生元のイベントのみ実行する

環境
Google Chrome　102.0.5005.63
Windows 10 Home 64bit

構文
e.stopPropagation()
イベント発生元の親要素に同一のイベントが設定されていた場合、親要素のイベントの実行をキャンセルすることができます。

使用例

<!DOCTYPE html>
<html>
<body>
<div id="cftB">
  <div id="cftA">
    <button id="ark">テスト</button>
  </div>
</div>
<script>
document.getElementById("ark").addEventListener('click', function(e){
  console.log('arkイベントが発生しました。');
  // イベントのバブリングをキャンセル
  e.stopPropagation();
}, false);
</script>

</body>
</html>

実行結果
イベント発生元(id="ark")のみイベントを実行します。
コンソールには「arkイベントが発生しました。」メッセージが表示されます。

JavaScript

Posted by arkgame