Javascriptでイベントのキャンセルについて

Javascriptでイベントのキャンセルについて

~stopImmediatePropagation、stopPropagation、preventDefaultの違い


event.stopImmediatePropagation();
event.stopImmediatePropagation; を実行後、同一要素(event.targetが同じ)で未だ実行されいない イベント(addEventListenerでclickイベントを複数登録している場合等)と、 親要素(その親要素も・・・)へのイベント伝番もキャンセルされる
event.stopPropagation();
親要素(その親要素も・・・)へのイベント伝番だけがキャンセルされる
event.preventDefault();
例えば
<a href="#scroll" onclick="event.stopPropagation();">クリック</a>
をクリックした場合、ID="scroll"の要素にスクロールする処理のような、ブラウザが元々持っている処理をキャンセルします。
event.preventDefault();を使っているイベントリスナーでは{passive: false}を指定しましょう。
「このイベントリスナはブラウザが元々持っている処理を妨害するかもしれないので実行を待ってね」という意味になります。
(例)
document.getElementById("id").addEventListener("click",function(){処理},{passive: false});

サンプル

<script>
  window.addEventListener("load",function(){

    document.getElementById("ATag").addEventListener("click",function(event){
        //要素(id="ATag")に1つ目のclickイベントを追加

        //これ以降の同一要素のイベント「alert("クリック2");」と、
        //親要素へのイベント伝播「alert("クリック3");」
        //がキャンセルされる
        event.stopImmediatePropagation();

        //親要素へのイベント伝播「alert("クリック3");」
        //だけがキャンセルされる
        event.stopPropagation();

        //<a href="#scroll">のようなブラウザが元々持っている処理をキャンセルする
        //この例では id="scroll" の要素にスクロールしない
        event.preventDefault();

        alert("クリック1");
    });
    
    document.getElementById("ATag").addEventListener("click",function(event){
        //要素(id="ATag")に2つ目のclickイベントを追加

        //stopImmediatePropagationでイベントがキャンセルされる
        alert("クリック2");
    });
    
    document.getElementById("ParentDivTag").addEventListener("click",function(event){
        //stopImmediatePropagation又はstopPropagationでこの要素(親要素)へのイベント伝播がキャンセルされる
        alert("クリック3");
    });
  });
</script>
<div id="ParentDivTag">
    <a href="#scroll" id="ATag">押すと下へスクロール</a><br>
</div>
<div style="padding-top:1200px;">
    <div id="scroll">
        aタグのhref="#scroll"で本来はココにスクロールする
        (preventDefaultでキャンセルされスクロールしない)
    </div>
</div>

Mam's WebSite