JavaScriptのイベントの伝播について
event.stopPropagation()
<!DOCTYPE html>
<html>
<head>
<title>Event Propagation Example</title>
</head>
<body>
<div id="parent" style="width: 200px; height: 200px; background-color: lightblue;">
Parent Div
<button id="child">Child Button</button>
</div>
<script>
document.getElementById('parent').addEventListener('click', function() {
alert('Parent Div clicked!');
});
document.getElementById('child').addEventListener('click', function(event) {
alert('Child Button clicked!');
event.stopPropagation(); // 親のイベントリスナーには伝播しない
});
</script>
</body>
</html>この例で言うと、
event.stopPropagation();を消すと、
イベントが親にも伝播して
alert(‘Child Button clicked!’);が2回表示されます。
よって、親にイベントが伝播しないようにevent.stopPropagation();を書きます。
event.stopImmediatePropagation()
<!DOCTYPE html>
<html>
<head>
<title>Double Click Example</title>
</head>
<body>
<button id="button">Click me</button>
<script>
document.getElementById('button').addEventListener('click', function(event) {
alert('Single click!');
});
document.getElementById('button').addEventListener('dblclick', function(event) {
alert('Double click!');
event.stopImmediatePropagation(); // 他のイベントリスナーには伝播しない
});
</script>
</body>
</html>この例では、ボタンをダブルクリックすると、「Double click!」というアラートが表示されますが、
シングルクリック時のイベントは発生しません。
event.stopPropagation()との違いは、
event.stopPropagation()は同じ要素への残りのイベントハンドラは実行されますが、
stopImmediatePropagation()は同じ要素への残りのイベントハンドラの実行も止めます。親要素へのイベントの伝播も止まります。
event.preventDefault()
<!DOCTYPE html>
<html>
<head>
<title>Event Default Action Example</title>
</head>
<body>
<a href="https://www.example.com" id="link">Go to Example.com</a>
<script>
document.getElementById('link').addEventListener('click', function(event) {
alert('Link clicked!');
event.preventDefault(); // デフォルトの動作（リンク先に移動する）をキャンセル
});
</script>
</body>
</html>event.preventDefault()はデフォルトの動作をキャンセルするので、
aタグを押してもリンクされず、アラートが表示されます。