JSFiddle - React, Tailwind, and code Playground

HTML

<p>I have two click events. Only the first will fire.</p>
<p>I have a mousedown and a click event. Both will fire.</p>

<h3>Note:</h3>
If stopImmediatePropagation() is suppose to stop 'all' further attached event handlers neither of these paragraphs would have their background change to red.

CSS

p {
    line-height: 30px;
    padding: 0 10px;
    background-color: #ccf;
}

JavaScript

$("p").eq(0).click(function (event) {
    event.stopImmediatePropagation();
    $(this).css("background-color", "#ccc");
});
$("p").eq(0).click(function (event) {
    $(this).css("background-color", "#f00");
});

$("p").eq(1).mousedown(function (event) {
    event.stopImmediatePropagation();
    $(this).css("background-color", "#ccc");
});
$("p").eq(1).click(function (event) {
    $(this).css("background-color", "#f00");
});