javascript - 将点击事件传递给下面的元素

Question

我有一个覆盖我网页的全屏透明 Canvas 。在 Canvas 上，我渲染了一个交互式对象。存在一个问题: Canvas 下方的元素(例如链接)不响应鼠标点击。

我通常会使用的明显解决方案是将 pointer-events: none 应用到 Canvas 。这将允许点击通过。但是，这在这种情况下不起作用，因为我希望交互式对象是可点击的。

所以这就是我想做的:
Canvas 应保留鼠标单击事件。如果事件不在交互对象上，它应该将事件传递给页面另一侧的元素。

我该怎么做？

Answer 1

找到了一个非常好的解决方案，我认为我应该分享它以防其他人有同样的问题。

我用了pointer-events: none在 Canvas 上。我像往常一样设置了 canvas.onclick 和 canvas.onmousemove；但是，指针事件被禁用，因此什么也不会发生。我绕过了这样的禁用指针事件:

document.addEventListener('click', function() {
 canvas.onclick();
});
window.onmousemove = function() {
 canvas.onmousemove();
}
// etc.

到目前为止，网页和 Canvas 都会收到鼠标事件。

现在，在我的交互式程序中，我包含了一个名为“mouseOver”的简单小函数，如果鼠标悬停在交互式对象上，该函数返回 true。我像这样修改了 window.onmousemove:

window.onmousemove = function() {
 canvas.onmousemove(); 
 if (mouseOver()) {
  canvas.style["pointer-events"] = "auto";
 } else {
  canvas.style["pointer-events"] = "none";
}};

这可以防止鼠标事件传递到网页，从而允许在不受网页干扰的情况下与对象进行交互。