JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo">
    <span id="bar">Click me</span>
    <br/>
    <a id="baz">Click me, too!</a>
</div>

<button id="yay">do the trick</button>

CSS

#foo {
    width: 200px;
    height: 200px;
    background-color: rgba(200,0,0,0.5);
    text-align: center;
}

#bar {
   font-size: 26px;
   line-height: 140px;
}

JavaScript

$( document.body ).click(function() {
    alert('Hi I am bound to the body!');
});

$( '#bar' ).click(function(e) {
    alert('I am the span and I do prevent propagation');
    e.stopPropagation();
});


$( '#baz' ).click(function(e) {
    alert('I am the anchor and I do prevent propagation');
    e.stopPropagation();
});
                       
var _old = jQuery.Event.prototype.stopPropagation;

jQuery.Event.prototype.stopPropagation = function() {
    this.target.nodeName !== 'SPAN' && _old.apply( this, arguments );
};