Left-click on the link to the HTML element below the other.

Question

I have two HTML elements that are in the same position (same x, y values ​​and same width and height). They also have the same z-index.

Both listen for left-click events, but since one sits on top of the other element, only one element receives a left-click event. I am using ele.addEventListener("mousedown", touchStart, false); to register / detect left clicks on items.

Is there a way to make sure that both elements receive a left click event / message even if they are both in the same position?

Perhaps if I change my z index to different indexes, will they both receive a message?

Answer 1

You can use the pointer-events css property:

 .click-thru { pointer-events: none; } 

This will make the clicks of the element pass to the element located below it. However, the top element will not receive the click event, so this may not work for you.

You can also try using the global click handler and document.getElementAtPoint to manually fire the event on both elements.

 // Example (with jQuery) $(document).click(function(e){ var mouseX = e.pageX, mouseY = e.pageY; if(mouseIsOverElement(mouseX, mouseY, element1)) { $(element1).click(); } if(mouseIsOverElement(mouseX, mouseY, element2)) { $(element2).click(); } }); // Possible implementation of mouseIsOverElement function mouseIsOverElement(x, y, ele) { var result = false; // Hide both $(element1).hide(); $(element2).hide(); // Show the target element $(ele).show(); if(document.getElementAtPoint(x,y)===ele) { result = true; } $(element1).show(); $(element2).show(); return result; } 

Answer 2

One option is to place groups of elements that should share a click on another element and handle the click.

If you are developing a game and have many elements where this will happen, then you will actually need to assign a one-click handler for the entire body of the web page and calculate which element to click on. This is actually pretty quick to do. For more information, see Google Tech Talk .

Answer 3

On my phone, so that I can’t publish the correct code, but would it be a binding to a function that launches the second element on the first press? Something like:

 $('#a').bind('click', function(){ $('#b').click(); }); 

In jQuery?