【讀fastclick源碼有感】完全解決tap「點透」，提高移動端點擊響應速度

時間 2019-11-13

標籤讀fastclick源碼有感完全解決 tap 提高移動端點響應速度欄目無線简体版

原文原文鏈接

申明！！！最後發現判斷有誤，各位讀讀就好，正在研究中.....尼瑪水太深了javascript

前言

近期使用tap事件爲老夫帶來了這樣那樣的問題，其中一個問題是解決了點透還須要將原來一個個click變爲tap，這樣的話咱們就拋棄了ie用戶
固然能夠作兼容，可是沒人想動老代碼的，因而今天拿出了fastclick這個東西，html

這是最近第四次發文說tap的點透事件，咱們一直對解決「點透」的蒙版耿耿於懷，因而今天老大提出了一個庫fastclick，最後證實解決了咱們的問題java

並且click沒必要替換爲tap了，因而咱們老大就語重心長的對我說了一句，大家就誤我吧，我郵件都發出去了......node

因而我下午就在看fastclick這個庫，看看是否是能解決咱們的問題，因而咱們開始吧android

讀fastclick源碼

尼瑪使用太簡單了，直接一句：ios

FastClick.attach(document.body);

因而全部的click響應速度直接提高，剛剛的！什麼input獲取焦點的問題也解決了！！！尼瑪若是真的能夠的話，原來改頁面的同事確定會啃了我瀏覽器

一步步來，咱們跟進去，入口就是attach方法：app

1 FastClick.attach = function(layer) {
2  'use strict';
3  return new FastClick(layer);
4 };

這個兄弟不過實例化了下代碼，因此咱們還要看咱們的構造函數：dom

 1 function FastClick(layer) {
 2  'use strict';
 3  var oldOnClick, self = this;
 4  this.trackingClick = false;
 5  this.trackingClickStart = 0;
 6  this.targetElement = null;
 7  this.touchStartX = 0;
 8  this.touchStartY = 0;
 9  this.lastTouchIdentifier = 0;
10  this.touchBoundary = 10;
11  this.layer = layer;
12  if (!layer || !layer.nodeType) {
13   throw new TypeError('Layer must be a document node');
14  }
15  this.onClick = function() { return FastClick.prototype.onClick.apply(self, arguments); };
16  this.onMouse = function() { return FastClick.prototype.onMouse.apply(self, arguments); };
17  this.onTouchStart = function() { return FastClick.prototype.onTouchStart.apply(self, arguments); };
18  this.onTouchMove = function() { return FastClick.prototype.onTouchMove.apply(self, arguments); };
19  this.onTouchEnd = function() { return FastClick.prototype.onTouchEnd.apply(self, arguments); };
20  this.onTouchCancel = function() { return FastClick.prototype.onTouchCancel.apply(self, arguments); };
21  if (FastClick.notNeeded(layer)) {
22   return;
23  }
24  if (this.deviceIsAndroid) {
25   layer.addEventListener('mouseover', this.onMouse, true);
26   layer.addEventListener('mousedown', this.onMouse, true);
27   layer.addEventListener('mouseup', this.onMouse, true);
28  }
29  layer.addEventListener('click', this.onClick, true);
30  layer.addEventListener('touchstart', this.onTouchStart, false);
31  layer.addEventListener('touchmove', this.onTouchMove, false);
32  layer.addEventListener('touchend', this.onTouchEnd, false);
33  layer.addEventListener('touchcancel', this.onTouchCancel, false);
34 
35  if (!Event.prototype.stopImmediatePropagation) {
36   layer.removeEventListener = function(type, callback, capture) {
37    var rmv = Node.prototype.removeEventListener;
38    if (type === 'click') {
39     rmv.call(layer, type, callback.hijacked || callback, capture);
40    } else {
41     rmv.call(layer, type, callback, capture);
42    }
43   };
44 
45   layer.addEventListener = function(type, callback, capture) {
46    var adv = Node.prototype.addEventListener;
47    if (type === 'click') {
48     adv.call(layer, type, callback.hijacked || (callback.hijacked = function(event) {
49      if (!event.propagationStopped) {
50       callback(event);
51      }
52     }), capture);
53    } else {
54     adv.call(layer, type, callback, capture);
55    }
56   };
57  }
58  if (typeof layer.onclick === 'function') {
59   oldOnClick = layer.onclick;
60   layer.addEventListener('click', function(event) {
61    oldOnClick(event);
62   }, false);
63   layer.onclick = null;
64  }
65 }

看看這段代碼，上面不少屬性幹了什麼事情我也不知道......因而忽略了ide

1 if (!layer || !layer.nodeType) {
2  throw new TypeError('Layer must be a document node');
3 }

其中這裏要注意，咱們必須傳入一個節點給構造函數，不然會出問題

而後這個傢伙將一些基本的鼠標事件註冊在本身的屬性方法上了，具體是幹神馬的咱們後面再說

在後麪點有個notNeeded方法：

 1 FastClick.notNeeded = function(layer) {
 2  'use strict';
 3  var metaViewport;
 4  if (typeof window.ontouchstart === 'undefined') {
 5   return true;
 6  }
 7  if ((/Chrome\/[0-9]+/).test(navigator.userAgent)) {
 8   if (FastClick.prototype.deviceIsAndroid) {
 9    metaViewport = document.querySelector('meta[name=viewport]');
10    if (metaViewport && metaViewport.content.indexOf('user-scalable=no') !== -1) {
11     return true;
12    }
13   } else {
14    return true;
15   }
16  }
17  if (layer.style.msTouchAction === 'none') {
18   return true;
19  }
20  return false;
21 };

這個方法用於判斷是否須要用到fastclick，註釋的意思不太明白，咱們看看代碼吧

首先一句：

1 if (typeof window.ontouchstart === 'undefined') {
2   return true;
3 }

若是不支持touchstart事件的話，返回true
PS：如今的只管感覺就是fastclick應該也是以touch事件模擬的，可是其沒有點透問題

後面還判斷了android的一些問題，我這裏就不關注了，意思應該就是支持touch才能支持吧，因而回到主幹代碼

主幹代碼中，咱們看到，若是瀏覽器不支持touch事件或者其它問題就直接跳出了

而後裏面有個deviceIsAndroid的屬性，咱們跟去看看（其實不用看也知道是判斷是不是android設備）

FastClick.prototype.deviceIsAndroid = navigator.userAgent.indexOf('Android') > 0;

綁定事件

好了，這傢伙開始綁定註冊事件了，至此還未看出異樣

 1 if (this.deviceIsAndroid) {
 2  layer.addEventListener('mouseover', this.onMouse, true);
 3  layer.addEventListener('mousedown', this.onMouse, true);
 4  layer.addEventListener('mouseup', this.onMouse, true);
 5 }
 6 layer.addEventListener('click', this.onClick, true);
 7 layer.addEventListener('touchstart', this.onTouchStart, false);
 8 layer.addEventListener('touchmove', this.onTouchMove, false);
 9 layer.addEventListener('touchend', this.onTouchEnd, false);
10 layer.addEventListener('touchcancel', this.onTouchCancel, false);

具體的事件函數在前面被重寫了，咱們暫時無論他，繼續日後面看先（話說，這傢伙綁定的事件夠多的）

stopImmediatePropagation

完了多了一個屬性：

阻止當前事件的冒泡行爲而且阻止當前事件所在元素上的全部相同類型事件的事件處理函數的繼續執行.

若是某個元素有多個相同類型事件的事件監聽函數,則當該類型的事件觸發時,多個事件監聽函數將按照順序依次執行.若是某個監聽函數執行了 event.stopImmediatePropagation()方法,則除了該事件的冒泡行爲被阻止以外(event.stopPropagation方法的做用),該元素綁定的其他相同類型事件的監聽函數的執行也將被阻止.

 1 <html>
 2     <head>
 3         <style>
 4             p { height: 30px; width: 150px; background-color: #ccf; }
 5             div {height: 30px; width: 150px; background-color: #cfc; }
 6         </style>
 7     </head>
 8     <body>
 9         <div>
10             <p>paragraph</p>
11         </div>
12         <script>
13             document.querySelector("p").addEventListener("click", function(event)
14             {
15                 alert("我是p元素上被綁定的第一個監聽函數");
16             }, false);
17             document.querySelector("p").addEventListener("click", function(event)
18             {
19                 alert("我是p元素上被綁定的第二個監聽函數");
20                 event.stopImmediatePropagation();
21                 //執行stopImmediatePropagation方法,阻止click事件冒泡,而且阻止p元素上綁定的其餘click事件的事件監聽函數的執行.
22             }, false);
23             document.querySelector("p").addEventListener("click", function(event)
24             {
25                 alert("我是p元素上被綁定的第三個監聽函數");
26                 //該監聽函數排在上個函數後面,該函數不會被執行.
27             }, false);
28             document.querySelector("div").addEventListener("click", function(event)
29             {
30                 alert("我是div元素,我是p元素的上層元素");
31                 //p元素的click事件沒有向上冒泡,該函數不會被執行.
32             }, false);
33         </script>
34     </body>
35 </html>

 1 if (!Event.prototype.stopImmediatePropagation) {
 2  layer.removeEventListener = function(type, callback, capture) {
 3   var rmv = Node.prototype.removeEventListener;
 4   if (type === 'click') {
 5    rmv.call(layer, type, callback.hijacked || callback, capture);
 6   } else {
 7    rmv.call(layer, type, callback, capture);
 8   }
 9  };
10 
11  layer.addEventListener = function(type, callback, capture) {
12   var adv = Node.prototype.addEventListener;
13   if (type === 'click') {
14    adv.call(layer, type, callback.hijacked || (callback.hijacked = function(event) {
15     if (!event.propagationStopped) {
16      callback(event);
17     }
18    }), capture);
19   } else {
20    adv.call(layer, type, callback, capture);
21   }
22  };
23 }

而後這傢伙從新定義了下注冊與註銷事件的方法，

咱們先看註冊事件，其中用到了Node的addEventListener，這個Node是個什麼呢？

由此觀之，Node是一個系統屬性，表明咱們的節點吧，因此這裏重寫了註銷的事件

這裏，咱們發現，其實他只對click進行了特殊處理

1 adv.call(layer, type, callback.hijacked || (callback.hijacked = function(event) {
2  if (!event.propagationStopped) {
3   callback(event);
4  }
5 }), capture);

其中有個hijacked劫持是幹神馬的就暫時不知道了，估計是在中間是否改寫的意思吧
而後這裏重寫寫了下，hijacked估計是一個方法，就是爲了阻止在一個dom上註冊屢次事件屢次執行的狀況而存在的吧

註銷和註冊差很少咱們就無論了，到此咱們其實重寫了咱們傳入dom的註冊註銷事件了，好像很厲害的樣子，意思之後這個dom調用click事件用的是咱們的，固然這只是我暫時的判斷，具體還要往下讀，並且我以爲如今的判斷不靠譜，因而咱們繼續吧

咱們註銷事件時候能夠用addEventListener 或者 dom.onclick=function(){}，因此這裏有了下面的代碼：

1 if (typeof layer.onclick === 'function') {
2  oldOnClick = layer.onclick;
3  layer.addEventListener('click', function(event) {
4   oldOnClick(event);
5  }, false);
6  layer.onclick = null;
7 }

此處，他的主幹流程竟然就完了，意思是他全部的邏輯就在這裏了，不論入口仍是出口應該就是事件註冊了，因而咱們寫個代碼來看看

測試入口

 1 <input type="button" id="addEvent" value="addevent">
 2 <input type="button" id="addEvent1" value="addevent1">
 3 
 4 $('#addEvent').click(function () {
 5     var dom = $('#addEvent1')[0]
 6     dom.addEventListener('click', function () {
 7         alert('')
 8         var s = '';
 9     })
10 });

咱們來這個斷點看看咱們點擊後幹了什麼，咱們如今點擊按鈕1會爲按鈕2註冊事件：

可是很遺憾，咱們在電腦上不能測試，因此增長了咱們讀代碼的困難，在手機上測試後，發現按鈕2響應很快，可是這裏有點看不出問題
最後alert了一個!Event.prototype.stopImmediatePropagation發現手機和電腦都是false，因此咱們上面搞的東西暫時無用

 1 FastClick.prototype.onClick = function (event) {
 2     'use strict';
 3     var permitted;
 4     alert('終於尼瑪進來了');
 5     if (this.trackingClick) {
 6         this.targetElement = null;
 7         this.trackingClick = false;
 8         return true;
 9     }
10     if (event.target.type === 'submit' && event.detail === 0) {
11         return true;
12     }
13     permitted = this.onMouse(event);
14     if (!permitted) {
15         this.targetElement = null;
16     }
17     return permitted;
18 };

而後咱們終於進來了，如今咱們須要知道什麼是trackingClick 了

1 /**
2 * Whether a click is currently being tracked.
3 * @type boolean
4 */
5 this.trackingClick = false;

咱們最初這個屬性是false，可是到這裏就設置爲true了，就直接退出了，說明綁定事件終止，算了這個咱們暫時不關注，咱們乾點其它的，
由於，我以爲重點仍是應該在touch事件上

PS：到這裏，咱們發現這個庫應該不僅是將click加快，而是全部的響應都加快了

我在各個事件部分log出來東西，發現有click的地方都只執行了touchstart與touchend，因而至此，我以爲個人觀點成立
他使用touch事件模擬量click，因而咱們就只跟進這一塊就好：

 1 FastClick.prototype.onTouchStart = function (event) {
 2     'use strict';
 3     var targetElement, touch, selection;
 4     log('touchstart');
 5     if (event.targetTouches.length > 1) {
 6         return true;
 7     }
 8     targetElement = this.getTargetElementFromEventTarget(event.target);
 9     touch = event.targetTouches[0];
10     if (this.deviceIsIOS) {
11         selection = window.getSelection();
12         if (selection.rangeCount && !selection.isCollapsed) {
13             return true;
14         }
15         if (!this.deviceIsIOS4) {
16             if (touch.identifier === this.lastTouchIdentifier) {
17                 event.preventDefault();
18                 return false;
19             }
20             this.lastTouchIdentifier = touch.identifier;
21             this.updateScrollParent(targetElement);
22         }
23     }
24     this.trackingClick = true;
25     this.trackingClickStart = event.timeStamp;
26     this.targetElement = targetElement;
27     this.touchStartX = touch.pageX;
28     this.touchStartY = touch.pageY;
29     if ((event.timeStamp - this.lastClickTime) < 200) {
30         event.preventDefault();
31     }
32     return true;
33 };

其中用到了一個方法：

1 FastClick.prototype.getTargetElementFromEventTarget = function (eventTarget) {
2     'use strict';
3     if (eventTarget.nodeType === Node.TEXT_NODE) {
4         return eventTarget.parentNode;
5     }
6     return eventTarget;
7 };

他是獲取咱們當前touchstart的元素

而後將鼠標的信息記錄了下來，他記錄鼠標信息主要在後面touchend時候根據x、y判斷是否爲click
是ios狀況下還搞了一些事情，我這裏跳過去了
而後這裏記錄了一些事情就跳出去了，沒有特別的事情，如今咱們進入咱們的出口touchend

 1 FastClick.prototype.onTouchEnd = function (event) {
 2     'use strict';
 3     var forElement, trackingClickStart, targetTagName, scrollParent, touch, targetElement = this.targetElement;
 4     log('touchend');
 5     if (!this.trackingClick) {
 6         return true;
 7     }
 8     if ((event.timeStamp - this.lastClickTime) < 200) {
 9         this.cancelNextClick = true;
10         return true;
11     }
12     this.lastClickTime = event.timeStamp;
13     trackingClickStart = this.trackingClickStart;
14     this.trackingClick = false;
15     this.trackingClickStart = 0;
16     if (this.deviceIsIOSWithBadTarget) {
17         touch = event.changedTouches[0];
18         targetElement = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset) || targetElement;
19         targetElement.fastClickScrollParent = this.targetElement.fastClickScrollParent;
20     }
21     targetTagName = targetElement.tagName.toLowerCase();
22     if (targetTagName === 'label') {
23         forElement = this.findControl(targetElement);
24         if (forElement) {
25             this.focus(targetElement);
26             if (this.deviceIsAndroid) {
27                 return false;
28             }
29             targetElement = forElement;
30         }
31     } else if (this.needsFocus(targetElement)) {
32         if ((event.timeStamp - trackingClickStart) > 100 || (this.deviceIsIOS && window.top !== window && targetTagName === 'input')) {
33             this.targetElement = null;
34             return false;
35         }
36         this.focus(targetElement);
37         if (!this.deviceIsIOS4 || targetTagName !== 'select') {
38             this.targetElement = null;
39             event.preventDefault();
40         }
41         return false;
42     }
43     if (this.deviceIsIOS && !this.deviceIsIOS4) {
44         scrollParent = targetElement.fastClickScrollParent;
45         if (scrollParent && scrollParent.fastClickLastScrollTop !== scrollParent.scrollTop) {
46             return true;
47         }
48     }
49     if (!this.needsClick(targetElement)) {
50         event.preventDefault();
51         this.sendClick(targetElement, event);
52     }
53     return false;
54 };

這個傢伙洋洋灑灑幹了許多事情

這裏糾正一個錯誤，他onclick那些東西如今也執行了......多是我屏幕有變化（滑動）致使

1 if ((event.timeStamp - this.lastClickTime) < 200) {
2  this.cancelNextClick = true;
3  return true;
4 }

這個代碼很關鍵，咱們首次點擊會執行下面的邏輯，若是連續點擊就直接完蛋，下面的邏輯丫的不執行了......
這個不執行了，那麼這個勞什子又幹了什麼事情呢？
事實上下面就沒邏輯了，意思是若是確實點擊過快，兩次點擊只會執行一次，這個閥值爲200ms，這個暫時看來是沒有問題的

好了，咱們繼續往下走，因而我意識到又到了一個關鍵點
由於咱們用tap事件不能使input得到焦點，可是fastclick卻能得到焦點，這裏也許是一個關鍵，咱們來看看幾個與獲取焦點有關的函數

 1 FastClick.prototype.focus = function (targetElement) {
 2     'use strict';
 3     var length;
 4     if (this.deviceIsIOS && targetElement.setSelectionRange) {
 5         length = targetElement.value.length;
 6         targetElement.setSelectionRange(length, length);
 7     } else {
 8         targetElement.focus();
 9     }
10 };

setSelectionRange是咱們的關鍵，也許他是這樣獲取焦點的......具體我還要下來測試，留待下次處理吧
而後下面若是時間間隔過長，代碼就不認爲操做的是同一dom結構了
最後迎來了本次的關鍵：sendClick，不管是touchend仍是onMouse都會匯聚到這裏

 1 FastClick.prototype.sendClick = function (targetElement, event) {
 2     'use strict';
 3     var clickEvent, touch;
 4     // On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24)
 5     if (document.activeElement && document.activeElement !== targetElement) {
 6         document.activeElement.blur();
 7     }
 8     touch = event.changedTouches[0];
 9     // Synthesise a click event, with an extra attribute so it can be tracked
10     clickEvent = document.createEvent('MouseEvents');
11     clickEvent.initMouseEvent('click', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
12     clickEvent.forwardedTouchEvent = true;
13     targetElement.dispatchEvent(clickEvent);
14 };

他建立了一個鼠標事件，而後dispatchEvent事件（這個與fireEvent相似）

 1 //document上綁定自定義事件ondataavailable
 2 document.addEventListener('ondataavailable', function (event) {
 3 alert(event.eventType);
 4 }, false);
 5 var obj = document.getElementById("obj");
 6 //obj元素上綁定click事件
 7 obj.addEventListener('click', function (event) {
 8 alert(event.eventType);
 9 }, false);
10 //調用document對象的 createEvent 方法獲得一個event的對象實例。
11 var event = document.createEvent('HTMLEvents');
12 // initEvent接受3個參數：
13 // 事件類型，是否冒泡，是否阻止瀏覽器的默認行爲
14 event.initEvent("ondataavailable", true, true);
15 event.eventType = 'message';
16 //觸發document上綁定的自定義事件ondataavailable
17 document.dispatchEvent(event);
18 
19 var event1 = document.createEvent('HTMLEvents');
20 event1.initEvent("click", true, true);
21 event1.eventType = 'message';
22 //觸發obj元素上綁定click事件
23 document.getElementById("test").onclick = function () {
24 obj.dispatchEvent(event1);
25 };

至此，咱們就知道了，咱們爲dom先綁定了鼠標事件，而後touchend時候觸發了，而至於爲何自己註冊的click未觸發就要回到上面代碼了

解決「點透」（成果）

有了這個思路，咱們來試試咱們抽象出來的代碼：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 6     <style>
 7         #list { display: block; position: absolute; top: 100px; left: 10px; width: 200px; height: 100px; }
 8         div { display: block; border: 1px solid black; height: 300px; width: 100%; }
 9         #input { width: 80px; height: 200px; display: block; }
10     </style>
11 </head>
12 <body>
13     <div id="list" style="background: gray;">
14     </div>
15     <div id="wrapper">
16         <div id="d">
17             <input type="text" id="input" />
18         </div>
19     </div>
20     <script type="text/javascript">
21         var el = null;
22         function getEvent(el, e, type) {
23             e = e.changedTouches[0];
24             var event = document.createEvent('MouseEvents');
25             event.initMouseEvent(type, true, true, window, 1, e.screenX, e.screenY, e.clientX, e.clientY, false, false, false, false, 0, null);
26             event.forwardedTouchEvent = true;
27             return event;
28         }
29         list.addEventListener('touchstart', function (e) {
30             var firstTouch = e.touches[0]
31             el = firstTouch.target;
32             t1 = e.timeStamp;
33         })
34         list.addEventListener('touchend', function (e) {
35             e.preventDefault();
36             var event = getEvent(el, e, 'click');
37             el.dispatchEvent(event);
38         })
39         var list = document.getElementById('list');
40         list.addEventListener('click', function (e) {
41             list.style.display = 'none';
42             setTimeout(function () {
43                 list.style.display = '';
44             }, 1000);
45         })
46     </script>
47 </body>
48 </html>