使用普通javascript检测点击和触摸事件

detecting clicks and touch events with vanilla javascript

本文关键字：触摸 事件 检测 javascript      更新时间：2023-09-26

大家好。我想获得页面上第一次点击或触摸的时间戳。这个页面可以在普通浏览器中加载，也可以在网络视图中加载，所以最好使用没有任何库的普通javascript。

这有可能实现吗？或者我必须使用一些jQuery之类的？我只想保存第一次交互的Date.now()。

如果你只想听第一次点击，你可以做一些简单的事情，比如：

window.onclick = function() {
    var timeStamp = Date.now();
    console.log(timeStamp);
    //do manipulations, send data to server / anything you want to do
    //unbind window.onclick (resetting it to empty function)
    window.onclick = function() {}
}

您可以在MDN上阅读有关onclick的更多信息
请注意这将解除绑定绑定到窗口对象本身的每个onclick，因为您只能有一个这样的侦听器。然而，与window.onclick = function() { ... }相比，还有另一种方法带来了以下优势：

  1. 它允许为一个事件添加多个处理程序。这是特别适用于DHTML库或Mozilla扩展需要与其他库/扩展很好地配合使用
  2. 当监听器被激活时，它为您提供了对阶段的细粒度控制（捕获与冒泡）
  3. 它适用于任何DOM元素，而不仅仅是HTML元素

因此，这基本上允许您添加这样的事件：

//first event listener
window.addEventListener('click', function() { console.log('click1'); });
//second event listener (also a click)
window.addEventListener('click', function() { console.log('click2'); });

上面的示例将在控制台中输出以下内容：

"click1"
"click2"

对addEventListener的浏览器支持是非常好的，即使你需要支持旧的浏览器，你也必须小心，因为不同的浏览器会有不同的实现。

对于（大多数）触摸设备，点击被转换为触摸，延迟300毫秒以检查双击，这并不是全部，但总体上实现得相当一致。

在MDN上，有一些关于Touch Web API的东西，但如果你向下滚动，它还没有真正的支持，其他库实现了使用鼠标事件的代码，这些鼠标事件被设备转换为点击，并将其与一些对象包装器一起使用来触发自定义触摸事件，Hammer.js就是其中一个库——这个库可能更聪明一点，因为它可能使用真实的触摸事件（如果存在的话），但我以前从未使用过Hammer.js。

相关文章：