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中的pointer-events-property，但是这个解决方案不会捕获＃capturer-Element上的任何触摸事件。

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

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

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

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

捕捉JavaScript事件＆＃34;默默地＆＃34;

1 个答案: