stopPropagationとイベントの伝播 | デフォルト動作とキャンセル | JavaScript 超完全入門 基本から発展までのすべて

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

stopPropagationとは？

stopPropagation()は、イベントが親要素へ伝わること（イベント伝播）を停止するためのメソッドです。

通常、クリックなどのイベントは、対象となった要素だけでなく、その親要素・さらに上位の要素へと順番に伝わっていきます。この動作をイベント伝播（Event Propagation）と呼びます。

stopPropagation()を使用すると、この伝播を途中で止めることができ、親要素のイベントは実行されなくなります。

イベント伝播の流れ

JavaScriptのイベントは、次の3段階で処理されます。

通常、addEventListener()で登録したイベントは、バブリングフェーズで実行されます。

基本的な使い方

子要素のクリック時に親要素へイベントを伝えたくない場合は、イベントオブジェクトのstopPropagation()を呼び出します。

document.getElementById("parent").addEventListener("click", function () {
    alert("親要素がクリックされました");
});

document.getElementById("child").addEventListener("click", function (event) {

    event.stopPropagation();

    alert("子要素がクリックされました");

});

子要素をクリックすると、子要素のイベントだけが実行され、親要素のクリックイベントは実行されません。

イベント伝播の動作例

const parent = document.getElementById("parentElement");

const child = document.getElementById("childElement");

parent.addEventListener("click", function () {

    console.log("親要素");

});

child.addEventListener("click", function (event) {

    event.stopPropagation();

    console.log("子要素");

});

このコードでは、子要素をクリックすると「子要素」だけが表示され、「親要素」は表示されません。

stopPropagation()を使わない場合

stopPropagation()を削除すると、イベントは親要素まで伝わります。

child.addEventListener("click", function () {

    console.log("子要素");

});

子要素をクリックすると、コンソールには次のように表示されます。

子要素
親要素

このように、イベントは親要素まで伝播します。

stopPropagation()とpreventDefault()の違い

この2つは役割がまったく異なります。

イベントを親へ伝えたくない場合はstopPropagation()を使い、ブラウザの標準動作を止めたい場合はpreventDefault()を使用します。

stopImmediatePropagation()との違い

似たメソッドとしてstopImmediatePropagation()があります。

同じ要素に複数のイベントリスナーが登録されている場合は、stopImmediatePropagation()のほうが強力です。

使用時の注意点

• stopPropagation()はイベント伝播だけを停止する。
• リンクの移動やフォーム送信は停止しない。
• デフォルト動作も止めたい場合はpreventDefault()を併用する。
• 多用すると他のイベント処理へ影響するため、必要な場面だけ使用する。

まとめ

• stopPropagation()は親要素へのイベント伝播を停止する。
• 通常はイベントは子要素から親要素へ伝播する。
• デフォルト動作は停止しない。
• デフォルト動作を止める場合はpreventDefault()を使用する。
• 同じ要素の他のイベントも停止したい場合はstopImmediatePropagation()を使用する。