HTML DOM stopPropagation()メソッドとは？イベント伝播の停止方法を実例付きで解説
HTML DOMのstopPropagation()イベントメソッドは、指定された要素におけるイベントの伝播（プロパゲーション）を停止するために使用されるメソッドです。これにより、子要素上で発生したクリックイベントが親要素へ伝わるのを防ぐことができます。なお、イベントの伝播は「イベントバブリング」とも呼ばれています。
stopPropagation()メソッドの基本
通常、DOM内の要素でイベントが発生すると、そのイベントは親要素へと順番に伝わっていきます。例えば、div要素の中にあるimg要素をクリックした場合、img要素のクリックイベントが発火した後、同じイベントがdiv要素にも伝播します。
stopPropagation()メソッドを呼び出すことで、この伝播を途中で止めることが可能になり、親要素のイベントハンドラが実行されなくなります。
構文
stopPropagation()イベントメソッドの構文は以下のとおりです。
event.stopPropagation()
使用例
ここでは、チェックボックスの状態に応じてイベントの伝播を制御するサンプルコードを紹介します。
<!DOCTYPE html>
<html>
<head>
<style>
#DIV_1 {
background: lightpink;
width:130px;
height:130px;
margin-left:40%;
text-align:center;
}
#IMG_1 {
width:100px;
height:100px;
position:relative;
left:5px;
}
</style>
</head>
<body>
<h1>stopPropagation()メソッドの使用例</h1>
<div id="DIV_1" onclick="OuterDiv()">
DIV ELEMENT
<img onclick="InnerImg(event)" id="IMG_1" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg">
</div>
伝播を停止：
<input type="checkbox" id="check">
<script>
function InnerImg(event) {
confirm("内部の画像がクリックされました");
if (document.getElementById("check").checked) {
event.stopPropagation();
}
}
function OuterDiv() {
confirm("外側のdivがクリックされました");
}
</script>
</body>
</html>このコードでは、ピンク色のdiv要素の中に画像が配置されています。画像をクリックすると「内部の画像がクリックされました」という確認ダイアログが表示され、さらにイベントが伝播すると「外側のdivがクリックされました」というダイアログも表示されます。
しかし、「伝播を停止」のチェックボックスにチェックを入れた状態で画像をクリックすると、stopPropagation()メソッドによってイベントの伝播が止まり、div要素側のダイアログは表示されません。
出力結果
上記のコードを実行すると、次のような画面が表示されます。
まず、チェックボックスにチェックを入れずにdiv要素内の画像をクリックした場合です。
表示されたダイアログで「OK」をクリックすると、イベントが親要素へ伝播し、続けて以下のダイアログが表示されます。
次に、「伝播を停止」のチェックボックスにチェックを入れた状態で、再度内部の画像をクリックしてみましょう。
この場合、画像のクリックイベントのみが処理され、stopPropagation()メソッドの働きによって親要素であるdivへのイベント伝播が阻止されていることが確認できます。
-
HTML DOMのtouchcancelイベントとは？構文とサンプルコードを解説
touchcancelイベントとはHTML DOMのtouchcancelイベントは、1つ以上のタッチイベントが中断されたときに発生します。たとえば、指で画面に触れている最中にブラウザがスクロールなどのジェスチャーを検出したり、システム側がタッチ処理をキャンセルしたりした場合に発火します。注意：このイベントはタッチ対応デバイス（スマートフォンやタブレットなど）でのみ機能します。マウスのみを使用するPC環境では発生しないため、実装時にはその点を考慮しておきましょう。構文touchcancelイベントの設定方法は、HTML属性を使う方法とJavaScriptを使う方法の2種類があります。HTML属
-
HTML DOMのtouchstartイベントとは？基本構文と実装例をわかりやすく解説
HTML DOMのtouchstartイベントは、ユーザーがタッチスクリーンに指を触れた瞬間に発生するイベントです。スマートフォンやタブレットなど、タッチ操作に対応したデバイスで動作するWebアプリケーションを開発する際に重要な役割を果たします。注意：このイベントはタッチ対応デバイス（モバイル端末やタッチパネル搭載PCなど）でのみ発生します。マウスのみの環境では動作しないため、必要に応じてmousedownイベントとの併用も検討しましょう。touchstartイベントの構文HTML属性で指定する場合ontouchstart = eventFunction()JavaScriptで指定する場合e