在移动端封装一个自己的tap事件

事件-移动端

---

单手指事件：

1. touchstart：手指按在屏幕上
2. touchmove：手指在屏幕上移动
3. touchend：手指离开屏幕
4. touchcancle ：手指操作取消（一般都是意外情况导致操作取消）

多手指事件：

1. getsturestart：多手指按下
2. getsturechange：多手指位置改变
3. getstureend ：手指离开
4. getsturecancel：多手指操作取消（一般都是意外情况导致操作取消）

click事件

PC：click为点击，快速点击两次，则触发两次click事件。
移动端：click为单击，快速点击两次(手指快速的点击两次触发的是doubleclick事件，而不是click事件)。

在移动端使用click的时候会有300ms的延迟（因为第一次操作的时候，浏览器会等待300ms看是否由下一次操作，300ms内没有下一次的操作，属於单击，由下一次操作属于双击）
如果你已经使用了click，如何解决300ms的延迟：引入fastClick.min.js

自己写的myTap事件来实现click事件，从而解决了300ms的延迟问题实现代码如下：

HTMLElement.prototype.myTap=HTMLElement.prototype.myTap||function (callBack) {
    var myTapStart=0,
        myTapEnd=0,
        timeTap=300;
    this.addEventListener("touchstart",function (e) {
        //获取touchstart事件的时间戳
        myTapStart=e.timeStamp;
        //changedTouchs是事件对象TouchEvent上面的属性,上面存储了一个当前操作的信息。
        let point=e.changedTouches[0];
       this.strX=point.pageX;
       this.strY=point.pageY;
       this.isMove=false;
    },false);
    this.addEventListener("touchmove",function (e) {
        let point=e.changedTouches[0];
        let changeX=point.pageX-this.strX;
        let changeY=point.pageY-this.strY;
        if(Math.abs(changeX)>10||Math.abs(changeY)>10){
            this.isMove=true;
        }
    },false);
    this.addEventListener("touchend",function (e) {
        //获取touchend事件的时间戳
        myTapEnd=e.timeStamp;
        timeTap=myTapEnd-myTapStart;
        if(!this.isMove&&timeTap<=300){
            callBack();
        }
    },false);
};
var box=document.querySelector("#box");
box.myTap(function () {
    console.log("这个是我封装好的单击事件myTap");
});