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

Question

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

Tim*_*ith 7 javascript jquery

我有一个全屏透明画布覆盖了我的网页。在画布上，我渲染了一个交互式对象。有一个问题：画布下方的元素（例如链接）无法响应鼠标单击。

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

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

我怎样才能做到这一点？

Answer 1

Tim*_*ith 9

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 2

Rav*_*aju 5

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

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>

Run Code Online (Sandbox Code Playgroud)

在这种情况下，父 div 捕获该事件，如果它对其进行操作，它将停止传播。否则它只会将其发送给其子级，而子级则依次收听它。希望这可以帮助

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

归档时间：	10 年前
查看次数：	7372 次
最近记录：	6 年，10 月前