JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo">
    <div id="bar"></div>
</div>

JavaScript

var body = $(document.body);
var foo = $("#foo");
var bar = $("#bar");

// Setup custom event on foo
foo.on("customEvent", function(e, triggerer) {
    console.log(e, triggerer);
    // Stop ancestors from being able to trigger
    if (triggerer && foo.closest(triggerer).length) {
        console.log("Triggered by ancestor");
        return false;
    }
    // Triggered by descendant
    if (e.target !== this) {
        console.log("Triggered by descendant");                   
    }
});

// Delegate the event so that all children can trigger it
foo.on("customEvent", "*", function(){ });

// Trigger customEvent on descendant
bar.trigger("customEvent");

// Trigger customEvent and pass a triggerer that is an ancenstor
foo.trigger("customEvent", body);