Question

我的网页上有一个全屏透明画布。在画布上，我渲染一个交互式对象。有一个问题：画布下面的元素（例如链接）不会响应鼠标点击。

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

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

我该怎么做？

Answer 1

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

我在画布上使用了pointer-events: none。我像往常一样设置canvas.onclick和canvas.onmousemove;但是，指针事件被禁用，因此没有任何反应。我绕过了这样的禁用指针事件：

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

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

现在，在我的交互式程序中，我添加了一个名为＆＃34; mouseOver＆＃34;的简单小函数。如果鼠标悬停在交互式对象上，则返回true。我像这样修改了window.onmousemove：

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

这可以防止鼠标事件进入网页，允许与对象进行交互而不会对网页造成干扰。

Answer 2

捕获的每个事件都经历两个阶段，

1）捕获（传播给孩子的地方） 2）冒泡（将其送回父母）

默认情况下，禁用捕获。你可以使用addEventListener（“click”，function（）{blah blah blah}， true ）将事件传递给它的子节点。

在子元素中，您可以根据需要处理事件。

以下是我通过编辑http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_addeventlistener

创建的示例代码

<!DOCTYPE html>
<html>
  <body>

    <p>This example uses the addEventListener() method to attach a click event to a button.</p>
    <div id="myBtn">
      <button id="myBtn2">Try it</button>
    </div>

    <p><strong>Note:</strong> The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.</p>

    <p id="demo"></p>

    <script>
    document.getElementById("myBtn").addEventListener("click", function(){
                if(true){
                  document.getElementById("demo").innerHTML = "Hello World";
                  event.stopPropagation();
                }
              }, true);

    document.getElementById("myBtn2").addEventListener("click", function(){
              document.getElementById("demo").innerHTML += "Hello World2";
              });
    </script>

  </body>
</html>

在这种情况下，父div捕获事件，如果它作用于它，它将停止传播。否则它只是将它发送给正在听取它的孩子。希望这有帮助

来源 - http://javascript.info/tutorial/bubbling-and-capturing

Answer 3

我相信你的问题的答案在于冒泡和捕捉。冒泡是指您的点击事件传递给元素的父母，而捕获则相反。我建议您查看此链接以了解这些流程的工作原理 - ＆gt; http://javascript.info/tutorial/bubbling-and-capturing 我不是100％肯定如何通过jQuery实现这一点。

将click事件传递给下面的元素

3 个答案: