移动端事件

概述

移动端事件可分为：

Touch触摸事件
Pointer指针事件

没有移动端事件时，大部分鼠标事件可以在移动端中使用。

苹果推出Touch触摸事件，Touch事件在PC端不会触发。

微软推出Pointer事件，直接继承了鼠标事件，在此基础上又添加了其他一些内容，处理 Pointer 事件和处理鼠标事件几乎一致。移动端和pc端适配推荐使用pointer事件。

兼容性

在这里插入图片描述

Touch触摸事件

事件类型

事件类型	说明
touchstart	手指触摸时触发
touchmove	手指触摸移动时触发
touchend	手指离开时触发
touchcancel	触摸被

是否支持事件

if ("ontouchstart" in window) {
    console.log("支持ontouchstart");
} else {
    console.log("不支持ontouchstart");
}

使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Touch事件</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #box {
        margin: 10px;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      if ("ontouchstart" in window) {
        console.log("支持ontouchstart");
      } else {
        console.log("不支持ontouchstart");
      }
      let box = document.getElementById("box");
      box.addEventListener("touchstart", startHandler);
      box.addEventListener("touchmove", moveHandler);
      box.addEventListener("touchend", endHandler);
      box.addEventListener("touchcancel", cancelHandler);
      function startHandler(e) {
        console.log("touchstart");
      }
      function moveHandler() {
        console.log("touchmove");
      }
      function endHandler() {
        console.log("touchend");
      }
      function cancelHandler() {
        console.log("touchcancel");
      }
    </script>
  </body>
</html>

event对象

event对象属性	说明
type	事件类型
target	目标元素
touches	当前屏幕上所有的触摸点
targetTouches	目标元素上的所有触摸点
changedTouches	记录触摸状态发生改变的触摸点信息，即只包括新增加的触摸点和移除的触摸点。

box.addEventListener("touchstart", startHandler);
function startHandler(e) {
    console.log("touchstart");
    console.log(e.type);
    console.log(e.target);
    console.log(e.touches);
    console.log(e.targetTouches);
    console.log(e.changedTouches);
}

touch对象

触摸点属性	说明
identifier	触摸点id（唯一标识），一般多用于多点触摸
target	目标元素
screenX/screenY	触点相对于屏幕的X、Y坐标
clientX/clientY	触摸点相对于浏览器的X、Y坐标，不计算滚动条
pageX/pageY	触摸点相对于页面的X、Y坐标，计算滚动条

function startHandler(e) {
    console.log("touchstart");
    const touch = e.changedTouches[0];
    console.log(touch);
    console.log(touch.identifier); //0
    console.log(touch.target);
    console.log(touch.screenX, touch.screenY); //110 323
    console.log(touch.clientX, touch.clientY); //95 112
    console.log(touch.pageX, touch.pageY); //95 112
}

阻止浏览器默认行为

e.preventDefault()可以阻止滚动、缩放、鼠标事件等默认行为。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Touch事件</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 2000px;
      }
      #box {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <img src="./images/1.jpg" alt="" />
    </div>
    <script>
      let box = document.getElementById("box");
      box.addEventListener("touchstart", pointerHandler, false);
      function pointerHandler(e) {
        e.preventDefault();
      }
    </script>
  </body>
</html>

单指拖拽

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Touch事件</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 2000px;
      }
      #box {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      let box = document.getElementById("box");

      // 开始点
      const startPoint = {};
      // 目标元素当前位置
      const currentPos = { x: 0, y: 0 };

      box.addEventListener("touchstart", startHandler);
      box.addEventListener("touchmove", moveHandler);
      box.addEventListener("touchend", endHandler);
      box.addEventListener("touchcancel", endHandler);
      function startHandler(e) {
        e.preventDefault();
        const touch = e.changedTouches[0];
        startPoint.x = touch.pageX;
        startPoint.y = touch.pageY;
      }
      function moveHandler(e) {
        const touch = e.changedTouches[0];
        // x轴移动距离
        let distanceX = touch.pageX - startPoint.x;
        // y轴移动距离
        let distanceY = touch.pageY - startPoint.y;
        box.style.left = distanceX + currentPos.x + "px";
        box.style.top = distanceY + currentPos.y + "px";
      }
      function endHandler(e) {
        currentPos.x = parseInt(box.style.left);
        currentPos.y = parseInt(box.style.top);
      }
    </script>
  </body>
</html>

Pointer指针事件

事件类型

事件类型	说明
pointerdown	指针按下时触发
pointerup	指针抬起时触发
pointermove	指针移动时触发
pointerenter	指针进入目标元素时触发
pointerleave	指针离开目标元素时触发
pointerover	指针悬停在目标元素上时触发
pointerout	指针离开目标元素时触发

是否支持事件

if ("onpointerdown" in window) {
    console.log("支持Pointer事件");
} else {
    console.log("不支持Pointer事件");
}

使用

let box = document.getElementById("box");

box.addEventListener("pointerover", pointerHandler, false);
box.addEventListener("pointerenter", pointerHandler, false);
box.addEventListener("pointerdown", pointerHandler, false);
box.addEventListener("pointermove", pointerHandler, false);
box.addEventListener("pointerup", pointerHandler, false);
box.addEventListener("pointerout", pointerHandler, false);
box.addEventListener("pointerleave", pointerHandler, false);

function pointerHandler(evt) {
    console.log(evt.type);
}

event对象

event对象属性	说明
pointerId	指针id（唯一标识）
type	事件类型
pointerType	指针类型（鼠标、笔、触摸）
target	目标元素
screenX/screenY	指针相对于屏幕的X、Y坐标
clientX/clientY	指针相对于可视区域的X、Y坐标，不包括任何滚动偏移
x/y	clientX/clientY 的别名
pageX/pageY	指针相对于文档的X、Y坐标，包括滚动偏移

box.addEventListener("pointerdown", pointerHandler, false);
function pointerHandler(e) {
    console.log(e);
    console.log(e.pointerId);
    console.log(e.type);
    console.log(e.pointerType);
    console.log(e.target);
    console.log(e.screenX, e.screenY); //114 300
    console.log(e.clientX, e.clientY); //98 144
    console.log(e.x, e.y); //98 144
    console.log(e.pageX, e.pageY); //98 144
}

阻止浏览器默认行为

方式一：通过evt.preventDefault() 阻止默认行为，主要用于PC端，不能阻止滚动、缩放、鼠标事件，可以阻止图片拖动行为。
方式二：通过CSS属性touch-action :none可以阻止所有默认行为。还有其他属性值：
- auto：默认行为处理触摸事件。
- none：禁止所有默认行为。
- pan-x：只处理水平平移手势。
- pan-y：值处理垂直平移手势。
- pan-x pan-y：处理水平和垂直平移手势。
- manipulation：启动所有手势，但经营缩放和滚动手势。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Touch事件</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #box {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <img src="./images/1.jpg" alt="" />
    </div>
    <script>
      let box = document.getElementById("box");
      box.addEventListener("pointerdown", pointerHandler, false);
      function pointerHandler(e) {
        e.preventDefault();
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Touch事件</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 2000px;
        /* 阻止所有默认行为 */
        touch-action: none; 
      }
      #box {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <img src="./images/1.jpg" alt="" />
    </div>
    </script>
  </body>
</html>

单指拖拽

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Touch事件</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 2000px;
      }
      #box {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      let box = document.getElementById("box");
      const startPoint = {};
      const currentPos = { x: 0, y: 0 };
      box.addEventListener("pointerdown", startHandler);
      box.addEventListener("touchstart", (e) => {
        e.preventDefault();
      });
      box.addEventListener("pointermove", moveHandler);
      box.addEventListener("pointerup", endHandler);
      box.addEventListener("pointercancel", endHandler);
      function startHandler(e) {
        startPoint.x = e.pageX;
        startPoint.y = e.pageY;
      }
      function moveHandler(e) {
        let distanceX = e.pageX - startPoint.x;
        let distanceY = e.pageY - startPoint.y;
        box.style.left = currentPos.x + distanceX + "px";
        box.style.top = currentPos.y + distanceY + "px";
      }
      function endHandler(e) {
        currentPos.x = parseInt(box.style.left);
        currentPos.y = parseInt(box.style.top);
      }
    </script>
  </body>
</html>

试试换一种写法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Touch事件</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 2000px;
      }
      #box {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      let box = document.getElementById("box");
      const startPoint = {};
      const currentPos = { x: 0, y: 0 };
      box.addEventListener("pointerdown", startHandler);
      box.addEventListener("touchstart", (e) => {
        e.preventDefault();
      });
      function startHandler(e) {
        startPoint.x = e.pageX;
        startPoint.y = e.pageY;
        document.addEventListener("pointermove", moveHandler);
        document.addEventListener("pointerup", endHandler);
        document.addEventListener("pointercancel", endHandler);
      }
      function moveHandler(e) {
        e.preventDefault;
        let distanceX = e.pageX - startPoint.x;
        let distanceY = e.pageY - startPoint.y;
        box.style.left = currentPos.x + distanceX + "px";
        box.style.top = currentPos.y + distanceY + "px";
      }
      function endHandler(e) {
        currentPos.x = parseInt(box.style.left);
        currentPos.y = parseInt(box.style.top);
        document.removeEventListener("pointermove", moveHandler);
        document.removeEventListener("pointerup", endHandler);
        document.removeEventListener("pointercancel", endHandler);
      }
    </script>
  </body>
</html>