在移動端封裝一個自己的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");
});