JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stop-default">
    <h4>With Stop Default</h4>
    <div class="first-div">
        Click on this first div here!
        <div class="second-div">
            Click on this second div here
        </div>
    </div>
</div>

<div class="stop-prop">
    <h4>With Stop Propagation</h4>
    <div class="first-div">
        Click on this first div here!
        <div class="second-div">
            Click on this second div here
        </div>
    </div>
</div>

CSS

.first-div {
    padding: 10px;
    background-color: red;
}

.second-div {
    padding: 10px;
    background-color: black;
    color: white;
}

JavaScript

$(function() {
    var stopDefault = $(".stop-default"),
        stopProp = $(".stop-prop");
    // Prevent Default handlers
    stopDefault.find(".first-div").click(function() {
        alert("First div clicked (using preventDefault)");
    });
    stopDefault.find(".second-div").click(function(e) {
        e.preventDefault();
        alert("Second div clicked (using preventDefault)");
    });
    
    // Stop prop handlers
    stopProp.find(".first-div").click(function() {
        alert("First div clicked (using stopPropagation)");
    });
    stopProp.find(".second-div").click(function(e) {
        e.stopPropagation();
        alert("Second div clicked (using stopPropagation)");
    });
});