将左键单击消息传递给另一个下面的HTML元素

Question

我有2个HTML元素,位于完全相同的位置(相同的x,y值和相同的宽度和高度).它们也具有相同的z指数.

两者都听左击事件,但由于一个位于另一个元素上,因此只有一个元素接收到左击事件.我ele.addEventListener("mousedown", touchStart, false);用来注册/检测元素的左键单击.

有没有办法确保两个元素都能收到左键单击事件/消息,即使它们都处于相同的位置？

也许如果我将他们的z-index更改为不同的索引,那么他们都会收到消息？

Answer 1

您可以使用pointer-events css属性:

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

这将使元素的点击进入其下方的元素.但是,top元素不会获得click事件,因此这可能对您不起作用.

您还可以尝试使用全局单击处理程序并document.getElementAtPoint在两个元素上手动触发事件.

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