捕获 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，触摸事件将继续 trickle/bubble 并在某个时候触发按钮点击，但似乎并非如此。任何想法为什么？以及如何在不干扰其他事件行为的情况下捕获事件的想法？

Answer 1

如果您只想点击#capturer-Element，您可以使用 css 中的指针事件-属性，但此解决方案不会捕获您的任何触摸事件#capturer-Element.

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

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

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

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

捕获 JavaScript 个事件 "silently"

Capture JavaScript events "silently"

javascript

jquery

event-handling

touch-event

jquery-events