Suppose I have two overlapping divs, along with the following jQuery code snippet:
$( "#div1" ).click(function() {
console.log('click on div1');
});
$( "#div2" ).mousemove(function() {
console.log('mousemove on div2');
});
From what I can gather, in this scenario only one of the divs will receive events - either the one defined last in the HTML, or the one with the highest z-index, which in this case is div2.
After some online research, I discovered that events can be directed to div1 if div2 is styled with pointer-events: none. However, this would render div2 completely unresponsive to any mouse events.
Is there a way to trigger events on both divs? For instance, can we filter events to have mousemoves activating div2 and clicks activating div1 in the given example?