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

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

HTML | DOM touchcancel 事件

介绍

touchcancel事件在手指在触摸屏上移动时，突然被中断时触发。 touchcancel事件的触发顺序是touchstart事件后，触摸被取消时才会执行。例如，在用户按下触摸屏后，弹出系统通知（例如电话呼叫），此时便会触发touchcancel事件。

语法
//添加触摸事件监听器
element.addEventListener("touchcancel", function(event));

参数:

  • event: 触发touchcancel事件的事件对象
例子和演示
HTML代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>touchcancel事件</title>
  </head>
  <body>
    <h1>touchcancel</h1>
    <p>在触摸屏上移动时，突然被中断时触发</p>
    <div id="touch-box"></div>
    <script>
      let touchBox = document.getElementById("touch-box");

      touchBox.addEventListener("touchstart", function (event) {
        touchBox.innerHTML = "触摸开始";
      });

      touchBox.addEventListener("touchmove", function (event) {
        touchBox.innerHTML = "触摸移动";
      });

      touchBox.addEventListener("touchcancel", function (event) {
        touchBox.innerHTML = "触摸被取消";
      });
    </script>
  </body>
</html>
演示

请查看这个CodePen演示。

说明
  • 当用户在touchbox元素上按下手指时，将会触发touchstart事件，此时touch-box元素的内容将会更改为“触摸开始”。
  • 当用户在touchbox元素上滑动手指时，将会触发touchmove事件，此时touch-box元素的内容将会更改为“触摸移动”。
  • 当用户在touchbox元素上按下手指时，弹出了一个系统通知（例如电话呼叫），此时将会中断用户的触摸操作，并且会触发touchcancel事件，此时touch-box元素的内容将会更改为“触摸被取消”。
结论

touchcancel是触摸事件的一个重要事件之一。当用户在触摸屏上进行操作需注意系统通知等中断操作，以避免用户体验差的情况。