Question

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?

Answer 1

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;
}