关于移动端事件的一些笔记

移动端事件类型

  1. touchstart事件
  2. touchmove事件
  3. touchend事件

移动端事件对象

  1. touches 屏幕上有几个触点
  2. targetTouches 绑定事件的元素上有几个触点
  3. changedTouches 在屏幕上 改变(位置移动 离开 进入 )的触点的个数(如果手指离开屏幕 只有changedTouched有值 其他都没有)

获取触点坐标

  1. clientX/Y获取的是， 触点相对于可视区的X/Y坐标(不包含滚动)(用的最多)
  2. pageX/Y获取的是 ， 触点相对于HTML文档左边沿的的X/Y坐标(包含滚动)
  3. screenX/Y获取的是返回触点相对于屏幕左边沿的的X/Y坐标.不包含页面滚动的（screenX/Y有兼容性）
  4. 细节: 如果想要clientX/YpageX/Y正确的结果,要写全viewport设置,如果写不全,那么不会得到正确的结果

300ms延迟

  1. 形成原因：曾经移动端在萌芽阶段的时候，我们把PC端的网页放到了移动端，苹果公司把PC端的网页进行了缩放，发明了一种浏览缩放网页的处理方案 ，就是双击放大，第一次点击会延迟300ms左右，然后判断，如果有第二次点击，就是放大，如果没有，就是点击
  2. console.time(“timer”)计时器开
  3. console.timeEnd(‘timer’)计时器关
  4. 解决方法：
  5. 写上 viewport 设置就可以了
  6. 用fastClick

移动端判断手指滑动方向

  1. 获取到 触点起始点坐标
  2. 获取到 触点 结束点坐标
  3. 计算 坐标的差值的绝对值
  4. 如果 水平坐标的差值的绝对值 大于竖直 就是水平滑动
  5. 如果 终止点坐标减去起始点坐标大于0 那么是向 右 否则是向左滑
  6. 如果 竖直坐标的差值的绝对值 大于水平 就是竖直滑动
  7. 如果 终止点坐标减去起始点坐标大于0 那么是向 下 否则是向上滑
  8. 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 1.声明变量
    var startX, startY, endX, endY, absX, absY;
    // 2.给document添加touchstart事件 
    document.addEventListener("touchstart", function (e) {
      var touches = e.targetTouches[0];

      startX = touches.clientX;
      startY = touches.clientY;

      // console.log(startX, startY);
    })

    // 3. 给document添加touchend事件
    document.addEventListener("touchend", function (e) {
      var touches = e.changedTouches[0];
      endX = touches.clientX;
      endY = touches.clientY;
      // 4. 计算坐标差值的绝对值
      absX = Math.abs(endX - startX);
      absY = Math.abs(endY - startY);

      if (absX == absY) {
        return;
      }
      // 5. 判断是水平还是垂直
      // 6. 如果是水平 判断左右
      // 7.如果是垂直 判断上下
      var direction = absX > absY ?
        endX - startX > 0 ? "向右" : "向左" :
        endY - startY > 0 ? "向下" : "向上";
      console.log(direction);
    })
  </script>
</body>
</html>