JSFiddle - React, Tailwind, and code Playground

by fasoeu

HTML

<p data-before="before">First P - can't detect mouse events</p>
<p data-before="before"><span>Second P - can detect mouse events</span></p>
<div id="logs"></div>

CSS

p {
    position: relative;
    background-color: blue;
    color:#ffffff;
    padding:0px 10px;
    pointer-events:none;
}
p:before {
    content: attr(data-before);
    margin-left:-10px;
    margin-right:10px;
    position: relative;
    background-color: red;
    padding:0px 10px;
    pointer-events:auto;
}
p span {
    background:#393;
    padding:0px 10px;
    pointer-events:auto;
}

JavaScript

var all_p = document.querySelectorAll('p');
all_p = Array.prototype.slice.call(all_p); // Convert the NodeList object to array (this method is not cross browser)
var listener = function(event){
    document.getElementById('logs').innerHTML += event.target.tagName + ' - ' + event.type + '<br />';
};
var event_list = ['click', 'mouseover'];
event_list.forEach(function(ev, ev_index){
    all_p.forEach(function(p, p_index){
        p.addEventListener(ev, listener, false);
    });
});