捕获 JavaScript 事件"silently"

Question

我目前正在实现一个JavaScript框架。在这里，我想捕获页面上的鼠标和触摸事件，而不会干扰其他事件处理。例如：

DOM：

<div id='capturer' style='position: fixed, width: 100%; height: 100%'></div>
<button id='btn'>A Button</button>

JS（使用 jQuery）：

$("#capturer").get(0).addEventListener("touchstart", onStart, true);
$("#capturer").get(0).addEventListener("touchmove",  onMove,  true);
$("#capturer").get(0).addEventListener("touchend",   onEnd,   true);

手势检测是通过onStart、onMove和onEnd完成的。如下代码出现问题：

$("#btn").click(function() { alert('button clicked'); });

此事件永远不会执行 - 我本以为，如果不调用preventDefault或stopPropagation，触摸事件会继续涓涓细流/冒泡，并在某个时候触发按钮单击，但事实似乎并非如此。知道为什么吗？以及如何在不干扰其他事件行为的情况下捕获事件的任何想法？

Answer 1

如果你只想点击 trought 的 #capturer-Element，你可以在 css 中使用 pointer-events-属性，但此解决方案不会捕获 #capturer-Element 上的任何触摸事件。

jQuery("#capturer").css({"pointer-events" : "none"});

注意：在此示例中，不会获得捕获器的任何事件。如果你想"捕捉"整个文档中的触摸元素，你可以尝试在正文元素上捕捉它们。

$("body").get(0).addEventListener("touchstart", onStart, true);
$("body").get(0).addEventListener("touchmove",  onMove,  true);
$("body").get(0).addEventListener("touchend",   onEnd,   true);

在这种情况下，您将获得整个内容的移动事件，并在按钮上获得点击事件。您还保存了一个 dom-element。