JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a href="http://wp.pl">wp.pl</a>
    </li>
</ul>

JavaScript

$(document).ready(function() {
    $body = $('body');
    
    $body.on('click', 'a', function(event) {
        event.preventDefault();
        event.stopPropagation();
        
        /**
         * Causes the "This also..." never shows, but "Why is..." still appears
         */
        //event.stopImmediatePropagation();
        
        alert('Should be seen always');
    });
    
    $body.on('click', 'a', function(event) {
        alert('This also should be seen - same level as "a"');
    });
    
    $body.on('click', 'li', function() {
        alert('This never shows - and that is ok - because is under "a"');
    });
    
    $body.find('ul').on('click', 'li', function() {
        alert('Why is this shown?');
    });
});