Javascriptイベントのキャンセル～stopImmediatePropagation、stopPropagation、preventDefault

～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("クリック２");」と、
        //親要素へのイベント伝播「alert("クリック３");」
        //がキャンセルされる
        event.stopImmediatePropagation();

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

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

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

        //stopImmediatePropagationでイベントがキャンセルされる
        alert("クリック２");
    });
    
    document.getElementById("ParentDivTag").addEventListener("click",function(event){
        //stopImmediatePropagation又はstopPropagationでこの要素(親要素)へのイベント伝播がキャンセルされる
        alert("クリック３");
    });
  });
</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>