ThatManK Mobile Article

touch触摸事件

Category: JS Tutorial: DOM操作 Published: 2026-04-07 13:58 Views: 20 Likes: 0 Comments: 0

touch 触摸事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <div></div>

    <script>
      // 1. 获取元素
      // 2. 手指触摸DOM元素事件
      var div = document.querySelector("div");
      div.addEventListener("touchstart", function () {
        console.log("我摸了你");
      });

      // 3. 手指在DOM元素身上移动事件
      div.addEventListener("touchmove", function () {
        console.log("我继续摸");
      });

      // 4. 手指离开DOM元素事件
      div.addEventListener("touchend", function () {
        console.log("轻轻的我走了");
      });
    </script>
  </body>
</html>