JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">hello main
    <div class="sub">hello sub</div>
</div>
<br>
<div class="main">hello main
    <div class="sub">hello sub
        <div>hello inner sub</div>
    </div>
</div>
<br>
<div class="supermain">hello supermain
    <div class="main">hello main
    <div class="sub">hello sub
        <div>hello inner sub</div>
    </div>
</div>

JavaScript

$(".main").on("click", function (event) {
    if($(event.target).closest(".sub").length){
        return;
    }
    alert("main")
    
});
$(".sub").on("click", function (event) {
    alert("sub");
});
$(".supermain").on("click", function (event) {
    alert("supermain");
});