挪動端觸摸、點擊事宜優化（fastclick源碼進修）

近來在做一些微信挪動端的頁面，在此紀錄關於挪動端觸摸和點擊事宜的進修優化歷程，主要內容繚繞fastclick睜開。
fastclick github

題目劈頭

挪動端瀏覽器平常在用戶點擊屏幕以後會耽誤約莫300ms才觸發click event

——
GOOGLE

手機翻開此鏈接檢察耽誤demo
（如今很多瀏覽器已不存在耽誤題目了，詳見fastclick github，但筆者的手機瀏覽器照樣湧現了三百毫秒耽誤的題目）
截圖以下

為何會300ms耽誤呢，主假若有一個雙擊縮放功用，瀏覽器須要推斷用戶點擊是不是為雙擊縮放。這個題目不處置懲罰，
1、用戶體驗就會很差，很不流通，尤其是在麋集操縱場景下，比方計算器,不處置懲罰300ms耽誤題目，覺得迴響反映很慢；
2、點擊穿透題目

事宜觸發遞次

在相識fastclick的思緒之前，我們先看一下事宜觸發遞次是怎樣的

• touchstart
• touchmove
• touchend
• mouseover ：當指針裝備挪動到存在監聽器的元素或其子元素的時刻，mouseover事宜就會被觸發。
• mouseenter：當指針裝備( 通常指鼠標 )在元素上挪動時, mousemove 事宜被觸發。
• mousedown
• click

挪動端click有300ms耽誤題目，touch可沒有哦。

fastclick思緒

fastclick的思緒就是應用touch來模仿tap（觸碰），假如認為是一次有用的tap，則在touchend時馬上模仿一個click事宜，分發到事宜源（相當於主動觸發一次click），同時阻撓掉瀏覽器300ms后發作的click。

源碼進修

先看運用示例，很簡單，我們的思緒就一向隨着attach走。

if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}

直接給body綁定fastlick就好了- -。
看源代碼組織（注：以下一切代碼均去掉了一些不影響明白思緒的部份，大部份思緒寫在解釋中）

//組織函數
function FastClick(layer, options)
//推斷是不是須要瀏覽器原生的click事宜（針對一些特別元素比方表單）
FastClick.prototype.needsClick = function(target)
//發送模仿的click event
FastClick.prototype.sendClick = function(targetElement, event)
// touchstart eventhandler
FastClick.prototype.OnTouchStart= function(event)
// touchmove eventhandler
FastClick.prototype.OnTouchMove= function(event)
// touchend eventhandler
FastClick.prototype.OnTouchEnd= function(event)
// 推斷此次tap是不是有用
FastClick.prototype.OnMouse= function(event)
//click handler 捕捉階段監聽
FastClick.prototype.OnClick= function(event)
//燒毀fastlick，移除事宜綁定
FastClick.prototype.destroy = function()
//綁定接口
FastClick.attach = function(layer, options) {
return new FastClick(layer, options);
};

attach現實就執行了組織函數舉行初始化，接下來我們來看組織函數發作了什麼

function FastClick(layer,options){
//一些屬性初始化
//安卓一些老版本瀏覽器不支持bind， poly fill
function bind (method, context) {
return function () {
return method.apply(context, arguments);
};
}
var methods = ['onMouse', 'onClick', 'onTouchStart', 'onTouchMove',
'onTouchEnd', 'onTouchCancel'];
var cOntext= this;
//將一切handler的this綁定到fastclick實例
for (var i = 0, l = methods.length; i context[methods[i]] = bind(context[methods[i]], context);
}
//為當前fast click對象綁定的layer（我們的示例中時document.body）加監聽
layer.addEventListener('click', this.onClick, true);//true 捕捉階段觸發
layer.addEventListener('touchstart', this.onTouchStart, false);
layer.addEventListener('touchmove', this.onTouchMove, false);
layer.addEventListener('touchend', this.onTouchEnd, false);
layer.addEventListener('touchcancel', this.onTouchCancel, false);
}

組織函數主假如初始化一些屬性，polyfill，和增加監聽，
下面最先看一下重頭戲，touchstart，touchend是怎樣推斷tap是不是有用、怎樣模仿click事宜、怎樣阻撓300ms后的click
touchstart

FastClick.prototype.OnTouchStart= function (event) {
var targetElement, touch, selection;
// Ignore multiple touches, otherwise pinch-to-zoom is prevented if both fingers are on the FastClick element (issue #111).
// 假如多觸點多是在縮放，不對targetElement初始化，在此提早停止防止誤模仿發作click
if (event.targetTouches.length > 1) {
return true;
}
//獵取發作事宜源元素（目的階段的元素）
targetElement = this.getTargetElementFromEventTarget(event.target);
touch = event.targetTouches[0]; this.trackingClick = true;//標記最先跟蹤click
this.trackingClickStart = event.timeStamp;//最先跟蹤時候
this.targetElement = targetElement;//事宜源元素
//觸摸坐標，接下來推斷是不是越界用到
this.touchStartX = touch.pageX;
this.touchStartY = touch.pageY;
// Prevent phantom clicks on fast double-tap (issue #36)
if ((event.timeStamp - this.lastClickTime) event.preventDefault();//阻撓以後的click
}
return true;
};


touchstart主假如初始化跟蹤的tap相干的一些屬性，用於以後的推斷‘
接下來touchmove

FastClick.prototype.OnTouchMove= function (event) {
if (!this.trackingClick) {
return true;
}
// If the touch has moved, cancel the click tracking 挪動到了其他元素
if (this.targetElement !== this.getTargetElementFromEventTarget(event.target) || this.touchHasMoved(event)) {//挪動越界了，作廢本次click模仿處置懲罰，走原生流程
this.trackingClick = false;
this.targetElement = null;
}
return true;
};

touchmove比較簡單，主假如兼容滑動tap（swiper）等等，滑動越界則不模仿click
下面是touchend

FastClick.prototype.OnTouchEnd= function (event) {
var forElement, trackingClickStart, targetTagName, scrollParent, touch, targetElement = this.targetElement;
if (!this.trackingClick) {
return true;
}
// Prevent phantom clicks on fast double-tap (issue #36)
//阻撓疾速雙擊
if ((event.timeStamp - this.lastClickTime) this.cancelNextClick = true;
return true;
}
//超時就不算click了，走原生流程，不阻撓click
if ((event.timeStamp - this.trackingClickStart) > this.tapTimeout) {
return true;
}
this.lastClickTime = event.timeStamp;
this.trackingClick = false;
this.trackingClickStart = 0;
// Prevent the actual click from going though - unless the target node is marked as requiring
// real clicks or if it is in the whitelist in which case only non-programmatic clicks are permitted.
if (!this.needsClick(targetElement)) {
event.preventDefault();//阻撓以後的click
this.sendClick(targetElement, event);//發送模仿click
}
return false;
};
//發送模仿的click event
FastClick.prototype.sendClick = function (targetElement, event) {
var clickEvent, touch;
// On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24)
if (document.activeElement && document.activeElement !== targetElement) {
document.activeElement.blur();
}
touch = event.changedTouches[0];
//模仿click
// Synthesise a click event, with an extra attribute so it can be tracked
clickEvent = document.createEvent('MouseEvents');
clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
clickEvent.forwardedTouchEvent = true;
//向targetElement分發模仿的click
targetElement.dispatchEvent(clickEvent);
};

末了，還會在layer的click捕捉階段監聽

//click handler 捕捉階段監聽
FastClick.prototype.OnClick= function (event) {
var permitted;
// It's possible for another FastClick-like library delivered with third-party code to fire a click event before FastClick does (issue #44). In that case, set the click-tracking flag back to false and return early. This will cause onTouchEnd to return early.
if (this.trackingClick) {//1、出界會置為false，2勝利模仿了一次完成tap並阻撓click也會置為false，3、防止三方庫影響
this.targetElement = null;
this.trackingClick = false;
return true;
}
// Very odd behaviour on iOS (issue #18): if a submit element is present inside a form and the user hits enter in the iOS simulator or clicks the Go button on the pop-up OS keyboard the a kind of 'fake' click event will be triggered with the submit-type input element as the target.
if (event.target.type === 'submit' && event.detail === 0) {
return true;
}
permitted = this.onMouse(event);
// Only unset targetElement if the click is not permitted. This will ensure that the check for !targetElement in onMouse fails and the browser's click doesn't go through.
if (!permitted) {
this.targetElement = null;
}
// If clicks are permitted, return true for the action to go through.
return permitted;
};
// 推斷此次鼠標是不是有用
FastClick.prototype.OnMouse= function (event) {
// If a target element was never set (because a touch event was never fired) allow the event
if (!this.targetElement) {
return true;
}
// 標記fastclick模仿發作的event
if (event.forwardedTouchEvent) {
return true;
}
// Programmatically generated events targeting a specific element should be permitted
if (!event.cancelable) {
return true;
}
// Derive and check the target element to see whether the mouse event needs to be permitted;
// unless explicitly enabled, prevent non-touch click events from triggering actions,
// to prevent ghost/doubleclicks.
// 是不是須要原生的click
if (!this.needsClick(this.targetElement) || this.cancelNextClick) {
// Prevent any user-added listeners declared on FastClick element from being fired.
if (event.stopImmediatePropagation) {
event.stopImmediatePropagation();
} else {
// Part of the hack for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2)
event.propagatiOnStopped= true;
}
// Cancel the event 阻撓事宜捕捉和冒泡
event.stopPropagation();
event.preventDefault();
return false;
}
// If the mouse event is permitted, return true for the action to go through.
return true;
};


這裏主假如推斷此次click是不是有用（如無效，則阻撓捕捉和冒泡）
至此基礎流程已完畢。
其中有1個注重的點，筆者在chrome(Version 64.0.3282.119 (Official Build) (64-bit))已測試
stopPropagation，stopImmediatePropagation不僅會阻撓冒泡還會阻撓捕捉歷程哦。

末了

引薦瀏覽源碼，源碼中有很多關於focus、差別瀏覽器兼容和特別表單元素的處置懲罰fastclick github。
這裡是筆者帶有中文解釋的代碼中文解釋代碼。
若有馬虎，迎接批評指正。

Reference

MDN
https://juejin.im/entry/55d73&＃8230;