📌  相关文章
📜  HTML | DOM touchend 事件(1)

📅  最后修改于: 2023-12-03 15:15:35.913000             🧑  作者: Mango

HTML | DOM touchend 事件

简介

touchend 事件是在用户停止触摸屏幕后触发的事件。它与 touchstart 和 touchmove 事件一起构成了 Web 应用程序中的触摸事件模型。

代码示例

以下代码示例展示了如何使用 touchend 事件监听屏幕上的触摸事件。在这个例子中，当用户触摸屏幕并抬起手指时，会在页面上显示一个消息。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Touchend Event Example</title>
  <script>
    window.addEventListener('load', function() {
      var element = document.getElementById('touch-area');
      element.addEventListener('touchend', function(event) {
        event.preventDefault();
        var message = document.getElementById('message');
        message.textContent = 'Touch End';
      });
    });
  </script>
</head>
<body>
  <div id="touch-area" style="width: 50vw; height: 50vh; background-color: #ccc;"></div>
  <div id="message"></div>
</body>
</html>

代码解释：

  1. 首先我们定义一个元素 touch-area 用来监听触摸事件。
  2. 加载页面时我们给 touch-area 添加了一个 touchend 事件监听器。
  3. 在事件监听器内，我们调用了 preventDefault() 方法来防止浏览器调用默认的处理方法。
  4. 我们修改了 message 元素的文本内容，显示了一个消息 'Touch End'。
兼容性

touchend 事件在移动设备上的浏览器中普遍支持。以下是部分支持该事件的浏览器版本：

  • iOS Safari 2.0+
  • Android Browser 2.1+
  • Chrome for Android
  • Firefox for Android
  • IE Mobile 10+
  • Opera Mobile 11.0+
  • Windows Phone 7.5+
延伸阅读