JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myDiv">
    <span id="mySpan">
        <a href="http://www.espn.com" target="_blank" id="myHref">Click Me</a>
        <br>
        <a href="http://www.espn.com" target="_blank" id="myHrefFalse">Click Me, return FALSE</a>
        <br>
        <a href="http://www.espn.com" target="_blank" id="myHrefStop">Click Me, stop propagation</a>
        <br>
        <a href="http://www.espn.com" target="_blank" id="myHrefPrevent">Click Me, prevent default &amp; stop propagation</a>
    </span>
</div>

JavaScript

(function(){
    
    var link = document.getElementById('myHref');
    var linkFalse = document.getElementById('myHrefFalse');
    var linkStop = document.getElementById('myHrefStop');
    var linkPrevent = document.getElementById('myHrefPrevent');
    var span = document.getElementById('mySpan');
    var div = document.getElementById('myDiv');
    var doc = document;
    
    doc.addEventListener('click',function(){
        console.log('clicked document');
    });
    
    link.addEventListener('click',function(){
         console.log('clicked link');        
    });
    
    linkFalse.addEventListener('click',function(){
        console.log('clicked link return false');
        return false;        
    });
   
    linkStop.addEventListener('click',function(){
        console.log('clicked link stop propagation');
        event.stopPropagation();            
    });
 
    linkPrevent.addEventListener('click',function(){
        console.log('clicked link stop propagation and prevent default');
        event.stopPropagation();            
        event.preventDefault();
    });
    
    span.addEventListener('click',function(){
         console.log('clicked span');
    });
    
    div.addEventListener('click',function(){
        console.log('clicked div');
    });
}());