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

这将使元素的点击进入其下方的元素。但是，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;
}

Answer 2

一个选项是将需要共享点击的元素组放入另一个元素并处理其中的点击。

如果您正在设计游戏并且有许多元素会发生这种情况，那么您需要做的是实际为网页的整个主体分配一个单击处理程序并计算单击哪个元素。这样做实际上很快。有关详细信息，请观看此Google Tech Talk。

Answer 3

在我的手机上，所以我无法发布正确的代码，但是当你点击第一个元素时，它是不是绑定一个触发第二个元素的函数的情况？有点像：

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

在jQuery中？

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

3 个答案: