JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><div class="d">1</div></li>
    <li><div class="d">2</div></li>
    <li><div class="d">3</div></li>
    <li><div class="d">4</div></li>
    <li><div class="d">5</div></li>
    <li><div class="d">6</div></li>
</ul>

CSS

ul{
    padding:20px;
}
li{
    margin-left:30px;
    margin-bottom:10px;
    border:1px solid black;
    
}
.d{
    padding:10px;
    background:gray;
}

JavaScript

var el=document.getElementsByTagName('ul')[0];
el.addEventListener('click',function(e){
    
    var elm=e.target.parentNode;
    if(document.createEvent)
    { 
        evt = document.createEvent('MouseEvents'); 
        evt.initMouseEvent("click", false, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
        elm.dispatchEvent(evt);
        liEventhandler(evt);           
    } 
    
});

function liEventhandler(e){
 console.log(e);
 console.log(e.target);
 console.log(e.which);
 alert(e.target.innerHTML);
}