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

Question

我有 2 个 HTML 元素，它们位于完全相同的位置(相同的 x、y 值和相同的宽度和高度)。它们也有相同的 z-index。

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

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

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

Answer 1

您可以使用pointer-events css property :

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

这将使元素上的点击传递到它下面的元素。但是，顶部元素不会获得点击事件，因此这可能对您不起作用。

您还可以尝试使用全局点击处理程序和 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;
}