javascript - 捕获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

如果您只想通过 #capturer-Element 单击，您可以在 css 中使用指针事件属性，但此解决方案不会捕获 #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 元素。