「JavaScript」stopPropagationメソッドで発生元のイベントのみ実行する
環境
Google Chrome 102.0.5005.63
Windows 10 Home 64bit
構文
e.stopPropagation()
イベント発生元の親要素に同一のイベントが設定されていた場合、親要素のイベントの実行をキャンセルすることができます。
使用例
<!DOCTYPE html>
<html>
<body>
<div id="cftB">
<div id="cftA" onclick="funA()">
<button id="ark">テスト</button>
</div>
</div>
<script>
document.getElementById("ark").addEventListener('click', function(e){
console.log('arkイベントが発生しました。');
// イベントのバブリングをキャンセル
e.stopPropagation();
}, false);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="cftB">
<div id="cftA" onclick="funA()">
<button id="ark">テスト</button>
</div>
</div>
<script>
document.getElementById("ark").addEventListener('click', function(e){
console.log('arkイベントが発生しました。');
// イベントのバブリングをキャンセル
e.stopPropagation();
}, false);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="cftB">
<div id="cftA" onclick="funA()">
<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イベントが発生しました。」メッセージが表示されます。