使用JavaScript检测HTML元素的长时间触摸事件-CSDN博客

本文链接：https://blog.csdn.net/weixin_53901860/article/details/130015067

在 HTML 中，可以在需要监控长时间触摸事件的元素上添加 touchstart、touchmove 和 touchend 事件监听器。同时，JavaScript 中的计时器功能也可以用来检测长时间触摸事件。

以下是一个实现长时间触摸事件监控的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Long Touch Event</title>
  </head>
  <body>
    <div id="myElement">Touch me for a long time</div>
    <script>
      var touchTimer;
      var myElement = document.getElementById('myElement');

      myElement.addEventListener('touchstart', function() {
        touchTimer = setTimeout(function() {
          // 处理长时间触摸事件的逻辑
          alert('Long touch event detected');
        }, 1000); // 设置阈值为1秒钟
      });

      myElement.addEventListener('touchmove', function() {
        clearTimeout(touchTimer);
      });

      myElement.addEventListener('touchend', function() {
        clearTimeout(touchTimer);
      });
    </script>
  </body>
</html>

在上面的示例中，我们在 div 元素上添加了 touchstart、touchmove 和 touchend 事件监听器，并通过 getElementById() 方法获取了该元素的引用。当用户开始触摸该元素时，我们启动了一个名为 touchTimer 的计时器，并设置一个阈值为 1 秒钟。如果手指在 1 秒钟内仍然保持触摸状态，那么就会触发长时间触摸事件的处理逻辑。在 touchmove 和 touchend 事件中，我们通过调用 clearTimeout() 函数来清除计时器，以确保不会误判长时间触摸事件。