JSFiddle - React, Tailwind, and code Playground

HTML

<p>Default</p>
<div id="a3" class="box size3">
    <div id="a2" class="box size2">
        <div id="a1" class="box size1"> <a id="a0" class="anchor" href="#jump">Link</a>

        </div>
    </div>
</div>
<p>e.stopPropagation()</p>
<div id="b3" class="box size3">
    <div id="b2" class="box size2">
        <div id="b1" class="box size1"> <a id="b0" class="anchor" href="#jump">Link</a>

        </div>
    </div>
</div>
<p>e.preventDefault()</p>
<div id="c3" class="box size3">
    <div id="c2" class="box size2">
        <div id="c1" class="box size1"> <a id="c0" class="anchor" href="#jump">Link</a>

        </div>
    </div>
</div>
<p>return false</p>
<div id="d3" class="box size3">
    <div id="d2" class="box size2">
        <div id="d1" class="box size1"> <a id="d0" class="anchor" href="#jump">Link</a>

        </div>
    </div>
</div>
<p>e.stopPropagation() と e.preventDefault()</p>
<div id="e3" class="box size3">
    <div id="e2" class="box size2">
        <div id="e1" class="box size1"> <a id="e0" class="anchor" href="#jump">Link</a>

        </div>
    </div>
</div>
<div id="jump">jumped!!</div>

CSS

#jump {
    margin-top: 600px;
}
.box {
    border-style: solid;
    border-width: 1px;
    display: block;
}
.size3 {
    width: 300px;
    height: 300px;
    background-color: green;
}
.size2 {
    width: 200px;
    height: 200px;
    background-color: blue;
}
.size1 {
    width: 100px;
    height: 100px;
    background-color: red;
}

JavaScript

document.addEventListener('click',function(e){
alert('document click');
});
$(function () {

    $(".anchor,.box").click(function (e) {
        alert(this.id);
    });

    $("#b2").click(function (e) {
        // 伝播をキャンセルする
        alert(this.id + " e.stopPropagation()");
        e.stopPropagation();
    });

    $("#c2").click(function (e) {
        // デフォルトアクションをキャンセル
        alert(this.id + " e.preventDefault()");
        e.preventDefault();
    });

    $("#d2").click(function (e) {
        // デフォルトアクションと伝播を両方キャンセルする
        alert(this.id + " return false;");
        return false;
    });

    $("#e2").click(function (e) {
        // デフォルトアクションと伝播を両方キャンセルする
        alert(this.id + " e.stopPropagation() & e.preventDefault()");
        e.stopPropagation();
        e.preventDefault();
    });
});