2

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?

Magnus
  • 3,086
  • 2
  • 29
  • 51
  • Are the elements in the same dom-node? If yes, apply onClick on the common parent. If not, you will have to track mouse position and compare to **all** elements. Further question. Do you want to click through? So if 2 buttons intersect and you click one, does the one below you'd have hit if the one you actually clicked wasnt there trigger aswell? Or Just the first one hit? – SirPilan Jul 15 '18 at 14:35
  • Clarification: in my case I have an svg with multiple overlapping child path elements that define various polygons; the path elements are all siblings of each other -- no nesting going on amongst them. I want to click on an arbitrary path element that in general will overlap one or more sibling path elements and thereby trigger (in general) any mouse event that would be triggered if that path were the only element. (Think clicking on shapes of Texas and USA where I want to populate two labels -- "Texas", "USA" -- by a single click on Texas.) – Magnus Jul 15 '18 at 14:52

2 Answers2

1

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{

});
katwekibs
  • 1,342
  • 14
  • 17
0

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
}
});
Anthony
  • 45
  • 7