JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div id="child">&nbsp;</div>
</div>
<div>stopImmediatePropagation
    <button id="stopWithJS">via JS</button>
    <button id="stopWithDOM" ">via DOM</button>
</div>

<div>
  <pre id="log ">
  </pre>
</div>

CSS

div {
    padding: 1em;
}
#parent {
    background-color: #CCC;
}
#child {
    background-color: #000;
    padding: 5em;
}
button {
    padding: 1em;
    font-size: 1em;
}
.active {
    background-color: green;
    color: white;
}

JavaScript

function clearLog() {
    $("#log").empty();
}

function log(s) {
    $("#log").append(s + '\n');
}

document.addEventListener('click', clearLog, true);

var state = {
    stopWithDOM: false,
    stopWithJS: false
};

function handlePropagation(event) {
    if (state.stopWithDOM) {
        event.originalEvent.stopImmediatePropagation();
    }

    if (state.stopWithJS) {
        event.stopImmediatePropagation();
    }
}

$("#child").click(function (e) {
    handlePropagation(e);
    log("First event handler on #child");
});

$("#child").get(0).addEventListener('click', function (e) {
    log("DOM added event listener!");
}, false);

$("#child").click(function (e) {
    handlePropagation(e);
    log("Second event handler on #child");
});

// Enable/disable propogation
$("button").click(function () {
    var objectId = this.id;
    $(this).toggleClass('active');
    state[objectId] = $(this).hasClass('active');
});