移动端手势

发表于 | 阅读次数：
移动端手势事件 总结

1. 什么是移动端手势事件（touch）：在手机或平板上手指与屏幕接触产生交互的事件。

2. touch有哪些事件

  1. touchstart： 当手指触摸屏幕时触发
    如何使用

    1
    2
    3
    el.addEventListener('touchstart',function(event){
        ...
    },false)

  2. touchmove： 当手指在屏幕滑动时不断的触发
    如何使用

    1
    2
    3
    el.addEventListener('touchmove',function(event){
        ...
    },false)

  3. touchend： 当手指从屏幕上移开时触发
    如何使用

    1
    2
    3
    el.addEventListener('touchend',function(event){
        ...
    },false)

  4. touchcancel： 当系统停止跟踪触摸时触发（意外停止触摸，如突然来了电话）
    如何使用

    1
    2
    3
    el.addEventListener('touchcancel',function(event){
        ...
    },false)

  5. 缺点每个元素都要添加事件繁琐

  6. 优化：
    1
    2
    3
    document.addEventListener('touch***'，function(event){
        //event 当前手指触摸的元素。 若又其他需求也可以添加判断 判断e.target属性
    },false)

3. touchEvent事件对象

  1. touches：当前屏幕上所有的手指对象
  2. targetTouches：当前元素上的手指对象(推荐使用)
  3. changedTouches：当前屏幕上变化的手指对象（屏幕触摸的手指从无到有，或从有到无，只会返回点击或离开的手指）
  4. event(移动端一般使用client)
    1. clientx：相对于当前视口 当前手指的位置距离视口的左上角X的值
    2. clienty：相对于当前视口 当前手指的位置距离视口的左上角Y的值
    3. screenX: 当前手指的位置距离屏幕的左上角X的值
    4. screenY：当前手指的位置距离屏幕的左上角Y的值
    5. pageX: 相对于当前页面的内容 当前手指的位置距离当前内容的左上角X的值
    6. pageY: 相对于当前页面的内容 当前手指的位置距离当前内容的左上角Y的值