【Sassで作るCssミニゲーム〜番外編】親子要素でonclickなどのイベントをどちらか一方に指定する方法

            
            /* イベントを発生させたくない */
.hoge {
   pointer-events: none;
}

/* イベントを発生させたい(デフォルト) */
.piyo {
   pointer-events: auto;
}
        

            
            <form>
    <label for="pointer-events-msg">クリックイベント: </label>
    <input type="text" id="pointer-events-msg" name="pointer-events-msg" value="" />
    <input type="reset" value="リセット">
</form>
<p>pointer-events:</p>
<div id="parent">
    <a id="child1">auto</a>
    <a id="child2">none</a>
</div>
<script>
    document.getElementById("parent").addEventListener("click", (e) => {
        document.getElementById("pointer-events-msg").value += 'PARENT! ';
    });
    document.getElementById("child1").addEventListener("click", (e) => {
        document.getElementById("pointer-events-msg").value += 'CHILD! ';
    });
    document.getElementById("child2").addEventListener("click", (e) => {
        document.getElementById("pointer-events-msg").value += 'CHILD! ';
    });
</script>
        

            
            #parent {
    width: 240px;
    background-color: darkgray;
    #child1 {
        display: block;
        width: 100%;
        height: auto;
        color: darkred;
        background-color: rgb(224, 241, 127);
        //pointer-events: auto;でも同じ
    }
    #child2 {
        display: block;
        width: 100%;
        height: auto;
        color: darkred;
        background-color: rgb(122, 148, 233);
        pointer-events: none; //👈子要素のイベントを抑制
    }
}
        

            
            バブリングフェーズ(デフォルト):
    DOMツリーで下層から上層へボトムアップ式でイベントを検出
キャプチャフェーズ:
    DOMツリーで上層から下層へトップダウン式でイベントを検出
ターゲットフェーズ:
    特定のイベント発生要素を検出。(今回は説明しない)
        

            
            //👇バブリングフェーズ(第三引数はデフォルトでfalseなので省略可)
document.getElementById("hoge").addEventListener("click", (e) => {
    // Do something
}, false);

//👇キャプチャフェーズ(第三引数はデフォルトでfalseなので省略可)
document.getElementById("piyo").addEventListener("click", (e) => {
    // Do something
}, true);
        

            
            <form>
    <label for="msg-test">親が先？子が先？: </label>
    <input type="text" id="msg-test" name="msg-test" value=""/>
    <input type="reset" value="リセット">
</form>
<div id="parent1">
    <a id="child1">キャプチャフェーズで発火</a>
</div>
<div id="parent2">
    <a id="child2">バブリングフェーズで発火</a>
</div>
<script>
    document.getElementById("parent1").addEventListener("click", (e) => {
        document.getElementById("msg-test").value += 'PARENT! ';
    },true);
    document.getElementById("child1").addEventListener("click", (e) => {
        document.getElementById("msg-test").value += 'CHILD! ';
    });
    document.getElementById("parent2").addEventListener("click", (e) => {
        document.getElementById("msg-test").value += 'PARENT! ';
    },false);
    document.getElementById("child2").addEventListener("click", (e) => {
        document.getElementById("msg-test").value += 'CHILD! ';
    });
</script>
        

            
            ...省略
<script>
    document.getElementById("parent1").addEventListener("click", (e) => {
        document.getElementById("msg-test").value += 'PARENT! ';
        e.stopPropagation(); //キャプチャフェーズにつき、子要素のイベントを抑制
    },true);
    document.getElementById("child1").addEventListener("click", (e) => {
        document.getElementById("msg-test").value += 'CHILD! ';
    });
    document.getElementById("parent2").addEventListener("click", (e) => {
        document.getElementById("msg-test").value += 'PARENT! ';
    },false);
    document.getElementById("child2").addEventListener("click", (e) => {
        document.getElementById("msg-test").value += 'CHILD! ';
        e.stopPropagation(); //バブリングフェーズにつき、親要素のイベントを抑制
    });
</script>