I have 2 HTML elements that sit in the exact same position(same x,y values & same width & height). They also have the same z-index.

Both listen to left click events but because one sits over the other element, only one element ever receives a left click event. I use ele.addEventListener("mousedown", touchStart, false); to register/detect left clicks on the elements.

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

Maybe if I change their z-index to different indexes then they will both receive the message?

I have 2 HTML elements that sit in the exact same position(same x,y values & same width & height). They also have the same z-index.

Both listen to left click events but because one sits over the other element, only one element ever receives a left click event. I use ele.addEventListener("mousedown", touchStart, false); to register/detect left clicks on the elements.

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

Maybe if I change their z-index to different indexes then they will both receive the message?

• javascript
• html
• css

Share Improve this question Follow edited Nov 3, 2011 at 23:00 Paul D. Waite 99k5757 gold badges203203 silver badges271271 bronze badges asked Nov 3, 2011 at 22:56 sazrsazr 26k7070 gold badges214214 silver badges387387 bronze badges 2

• Repost of: stackoverflow./questions/3268791/… – switz Commented Nov 3, 2011 at 22:59
• 1 Not sure for the HTML as described, but what if you put both elements inside a containing <div> (also at the same position) and then handle clicks on the container? – nnnnnn Commented Nov 3, 2011 at 23:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

You can use the pointer-events css property:

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

This will make it so that clicks on the element travel through to the element below it. However, the top element won't get the click event, so this might not work for you.

You can also try using a global click handler and document.getElementAtPoint to manually trigger the event on the 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;
}

One option is to place the groups of elements that need to share a click into another element and handle the click there.

If you are designing a game and have many elements where this will be occurring, what you would have to do is actually assign a single click handler to the entire body of the web page and calculate which element is clicked on. It's actually quite quick to do this. For more information, watch this Google Tech Talk.

On my phone so I can't post proper code, but would it not be a case of binding a function that triggers the second element when you click the first? Something along the lines of:

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

In jQuery?