JSFiddle - React, Tailwind, and code Playground

by tnhu

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: '';
    margin-left:-10px;
    margin-right:10px;
    position: relative;
    background-color: red;
    padding:0px 10px;
    pointer-events:auto;
    cursor: col-resize;
}
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;
};
var event_list = ['mouseover', 'mousedown'];
event_list.forEach(function(ev, ev_index){
    all_p.forEach(function(p, p_index){
        p.addEventListener(ev, listener, false);
    });
});