How to trigger mouse-click event on multiple HTML elements covering each other?

Question

How to trigger multiple mouse-click events on arbitrarily many HTML elements covering each other?

I know you can use pointer-events: none; to let your click pass through your elements, but what if I want to trigger the mouse-click event on an element AND the mouse-click event on arbitrarily many other elements beneath it?

Answer 1

A solution could be to track mouse move using :

$( document ).mousemove();

Store coordinates to a global variable then check its position when your element is clicked. That would give something like :

var mousePos = [0,0];
$( document ).mousemove(function( event ) {
    mousePos[0] = event.pageX
    mousePos[1] = event.pageY
});
$("#target").click(function(){
// Compare mouse coordinates and your items ones using offset, height and width
if(mousePos[0] > $('#target2').offset.left){
    // Do whatever you are willing to do
}
});

Answer 2

but what if I want to trigger the mouse-click event on an element AND the mouse-click event on arbitrarily many other elements beneath it?

Events bubble. Which means and event fired on an inner element, will also be received by the parent elements until the top most parent.

<div id="topmost">
    <div id="second">
        <p id="firstp"></p>
    </div>
</div>

Assume you are using jquery. Below is how you would listen to click events from all elements below div.id="topmost".

Since the normal flow of events is for any click event (could be any other type of event) that is fired by any element with in the topmost div element will be bubbled to the outermost element, I only list to topmost click event and then check which element fired that event by checking the id of the target element. e.target will be the actual element that the click was performed on. You can either switch target.attr('id') or run it through if else conditions.

$(function () {
  $("#topmost").on("click", function (e) {
    e.preventDefault();
    var target = $(e.target);
    if(target.attr('id') === "idOfElement"){
       // code to handle the event
    }else{

});