HTML | DOM touchmove 事件(1)

📌 相关文章

📜 HTML | DOM touchmove 事件(1)

📅 最后修改于: 2023-12-03 14:41:48.949000 🧑 作者: Mango

HTML | DOM touchmove 事件

简介

touchmove 事件是指手指在移动过程中触发的事件。该事件主要应用于移动端开发中。

用法

在 HTML 页面中添加 ontouchmove 属性即可监听 touchmove 事件：

<body ontouchmove="handleTouchMove(event)">

在 JavaScript 代码中实现 handleTouchMove 函数：

function handleTouchMove(event) {
  // 手指移动时的操作
}

在 handleTouchMove 方法中，可以通过 event 对象的属性获取手指移动的相关信息：

touches 数组：一个包含当前所有手指信息的数组。
targetTouches 数组：一个包含当前在目标元素内的手指信息的数组。
changedTouches 数组：一个包含最近一次触发事件的手指信息的数组。

例如，可以通过 event.touches[0].pageX 和 event.touches[0].pageY 获取第一根手指在页面上的位置。

示例

以下示例演示如何在移动手指时实时改变元素的位置：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Touch Move Demo</title>
  <style>
    #box {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body ontouchmove="handleTouchMove(event)">

  <div id="box"></div>

  <script>
    function handleTouchMove(event) {
      var touch = event.touches[0];
      var box = document.getElementById('box');
      box.style.top = touch.pageY - 50 + 'px';
      box.style.left = touch.pageX - 50 + 'px';
    }
  </script>

</body>

</html>

在上述示例中，当手指在页面上移动时，触发 handleTouchMove 函数，从而实时更新 #box 元素的位置，使其跟随手指移动。