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

移动端事件类型

  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. 代码如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <!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>