前端基础学习之移动端触摸事件touch

1. touch是移动端的触摸事件，是一组事件

• 1.1 touchstart 当手指触摸屏幕时触发
• 1.2 touchmove 手指在屏幕上来回滑动时触发
• 1.3 touchend 手指离开屏幕时触发
• 1.4 touchcancel 被迫终止滑动时触发（比如玩游戏的时候突然有来电显示，或者突然弹出一条消息）

2.利用touch相关事件来实现移动端常见的滑动效果和常见的手势事件

• 使用touch绑定事件:推荐使用 addEventListener

• touch事件对象中关注三个对象值：

  • changedTouches 改变后的触摸点的集合（在每个事件触发的时去记录触摸点）
  • targetTouches 目前元素上触摸点的集合 （离开屏幕的时候就无法记录触摸点）
  • touches 页面上所有触摸点的集合 （离开屏幕的时候就无法记录触摸点）

• 滑动的实现原理:让触摸的元素随着手指的滑动做出位置的改变。

  • 既然是改变位置 那么就得记录当前手指触摸的位置坐标
  • 在每个触摸点中都会记录当前触摸点的位置坐标 例如：e.touches[0] 表示页面中的第一个触摸点
  • clientX clientY 基于浏览器窗口（视口）
  • pageX pageY 基于页面
  • screenX screenY 基于屏幕 （屏幕中可能还包含浏览器工具栏等等 这些额外的高度宽度 所以 screenX 相比前两个位置 坐标记录可能会大一些）

• 移动端的滑动手势swipe：例如左滑手势右滑手势，其实就是根据滑动距离的正负做判断。

• 移动端的tap事件：轻击 轻触

  • 移动端的click事件：在移动端为了区分是滑动还是点击，在接触屏幕之后会等待一段时间看是否会滑动 如果没有滑动 就是click。因此移动端的click 会有300ms的延时。
  • 因为click的延时问题，解决方案之一就是使用tap事件（不是移动端的原生事件，也是通过touch事件衍生出来的 ），fastclick.js也可解决延时问题。
  • tap特点：响应事件快
  • 实现tap需要满足以下几个条件：
    • 延时在150ms之内 ----要比click延时低
    • 不能滑动

实例：

• 1.touchstart touchmove touchend 事件监听
  

    let box=document.querySelector('div');
    box.addEventListener('touchstart',ev => {
        console.log("touchstart:");
        console.log(ev);
    });
    box.addEventListener('touchmove',ev => {
        console.log("touchmove:");
        console.log(ev);
    });
    box.addEventListener('touchend',ev => {
        console.log("touchend:");
        console.log(ev);
    })

• 2.左滑 右滑实现
  

window.onload = function () {
        let bindSwipeEvent = function (dom, leftCallback, rightCallBack) {
            // let dom = document.querySelector('div');
            let startX = 0;
            let distanceX = 0;
            let isMove = false;
            dom.addEventListener("touchstart", ev => {
                startX = ev.touches[0].clientX;
            });
            dom.addEventListener("touchmove", ev => {
                distanceX = ev.touches[0].clientX-startX;
                isMove = true;
            });
            dom.addEventListener("touchend", ev => {
                //约定超过20px才算滑动
                if (isMove && Math.abs(distanceX) > 20) {
                    if (distanceX > 0) {
                        //左滑
                        leftCallback && leftCallback.call(this, ev);
                    } else {
                        //右滑
                        rightCallBack && rightCallBack.call(this, ev);
                    }

                }
            });
        };
        bindSwipeEvent(document.querySelector("div"),
            ev => {
                console.log("左滑");
                console.log(this);
                console.log(ev);
            },
            ev => {
                console.log("右滑");
                console.log(this);
                console.log(ev);
            });


    }

• 3.tap事件实现（满足150ms延时内以及没有滑动的时候才会触发tap事件）
  

window.onload=function () {
      let  bindTapEvent=function (dom,callback) {
          let startTime=0;
          let isMove=false;
          dom.addEventListener("touchstart",ev=>{
                startTime=Date.now();
          });
          dom.addEventListener("touchmove",ev=>{
                isMove=true;
          });
          dom.addEventListener("touchend",ev=>{
              console.log(Date.now()-startTime);
                if(Date.now()-startTime <150 && !isMove){
                    callback && callback.call(this,ev);
                }
                isMove=false;
          });


      };
      bindTapEvent(document.querySelector("div"),function (e) {
          console.log("tap事件");
          console.log(this);
          console.log(e);
      })

    };