无需插件，移动端h5模拟长按事件(带有可视化）

前端

2023-10-28 09:52:02

长按事件简介

长按事件是指用户在某个元素上按住一段时间，直到触发某个动作。在移动端，长按事件通常用于显示更多选项或删除某个元素。

模拟长按事件

在移动端h5中，我们可以通过以下步骤模拟长按事件：

为元素添加touchstart事件监听器。
在touchstart事件监听器中，启动一个定时器。
在定时器中，判断用户是否仍在按住元素。
如果用户仍在按住元素，则触发长按事件。
在touchend事件监听器中，清除定时器。

可视化示例

下面是一个可视化的示例，演示了如何在移动端h5中模拟长按事件：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="my-element">长按我</div>

  <script>
    const element = document.getElementById('my-element');

    // 添加touchstart事件监听器
    element.addEventListener('touchstart', (event) => {
      // 启动一个定时器
      const timer = setTimeout(() => {
        // 如果用户仍在按住元素，则触发长按事件
        alert('长按事件已触发！');
      }, 500);

      // 添加touchend事件监听器
      element.addEventListener('touchend', () => {
        // 清除定时器
        clearTimeout(timer);
      });
    });
  </script>
</body>
</html>