資訊專欄INFORMATION COLUMN
摘要：但這樣副作用也很大，移動端的交互體驗全靠觸摸，將會干擾其他交互行為的處理，例如滾動拖拽等。方案模擬修復法既然瀏覽器有這的延遲，那么我們來代替瀏覽器判斷，手動觸發事件，這也是的解決方案。
眾所周知，移動端在處理點擊事件的時候，會有300毫秒的延遲。恰恰是這300毫秒的延遲，會讓人有一種卡頓的體驗。
這300毫秒的原因，在于早期瀏覽器的實現中，瀏覽器不知道用戶觸摸后，到底想做什么，所以故意等待300毫秒，再觸發click事件。
既然我們已經知道了原因了，怎么解決呢？
方案1-粗暴治標法因為瀏覽器對click事件的處理，有300ms的延遲，而touchstart幾乎是立即執行的，估將所有click事件的監聽，改為touchstart事件的監聽，即可消除這300ms的延遲。
但這樣副作用也很大，移動端的交互體驗全靠觸摸，touchstart將會干擾其他交互行為的處理，例如滾動、拖拽等。
方案2-模擬修復法既然瀏覽器有這300ms的延遲，那么我們來代替瀏覽器判斷，手動觸發click事件，這也是fastClick的解決方案。
fastClick的核心代碼
FastClick.prototype.onTouchEnd = function(event){
// 一些狀態監測代碼
// 從這里開始，
if (!this.needsClick(targetElement)) {
// 如果這不是一個需要使用原生click的元素，則屏蔽原生事件，避免觸發兩次click
event.preventDefault();
// 觸發一次模擬的click
this.sendClick(targetElement, event);
}
}
這里可以看到，FastClick在touchEnd的時候，在符合條件的情況下，主動觸發了click事件，這樣避免了瀏覽器默認的300毫秒等待判斷。為了防止原生的click被觸發，這里還通過event.preventDefault()屏蔽了原生的click事件。
我們來看看他是怎么模擬click事件的
FastClick.prototype.sendClick = function(targetElement, event) {
// 這里是一些狀態檢查邏輯
// 創建一個鼠標事件
clickEvent = document.createEvent("MouseEvents");
// 初始化鼠標事件為click事件
clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
// fastclick的內部變量，用來識別click事件是原生還是模擬
clickEvent.forwardedTouchEvent = true;
// 在目標元素上觸發該鼠標事件，
targetElement.dispatchEvent(clickEvent);
我們在網上搜索fastClick，大部分都在說他解決了zepto的點擊穿透問題，他是怎么解決的呢？就是上面最后一句，他模擬的click事件是在touchEnd獲取的真實元素上觸發的，而不是通過坐標計算出來的元素。
最后，原理雖簡單，但還是建議大家直接用FastClick而不是自己再實現一個。因為，你看他源碼里面的注釋，有很多特殊情況的補丁的，自己實現一個精簡版難免會漏這漏那。
附錄同步發表于我的博客
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85888.html
摘要：所有瀏覽器瀏覽器不支持安卓中中有屬性安卓中中有屬性有屬性的有屬性的所以在不需要的瀏覽器會直接掉，不會執行下面的所有代碼。見源碼行，可以看出在響應無操作后，則觸發。 其實一直就想花些時間讀一讀那些優秀的開源庫，今天終于下了決定打算死磕下自己，2016年每個月讀2-3個優秀的開源庫，把源碼精彩的地方和自己心得分享給大家。 目錄 （一）背景（二）源碼解析（三）Zepto 點擊穿透與 Fast...
摘要：移動端經常出現點透，至于怎么出現的請大家去看一下實現的源碼。點透是什么你可能碰到過在列表頁面上創建一個彈出層，彈出層有個關閉的按鈕，你點了這個按鈕關閉彈出層后后，這個按鈕正下方的內容也會執行點擊事件或打開鏈接。這個被定義為這是一個點透現象。 移動端經常出現點透，至于怎么出現的請大家去看一下zepto實現tap的源碼。 1、點透是什么 你可能碰到過在列表頁面上創建一個彈出層，彈出層有個關...
摘要：移動端經常出現點透，至于怎么出現的請大家去看一下實現的源碼。點透是什么你可能碰到過在列表頁面上創建一個彈出層，彈出層有個關閉的按鈕，你點了這個按鈕關閉彈出層后后，這個按鈕正下方的內容也會執行點擊事件或打開鏈接。這個被定義為這是一個點透現象。 移動端經常出現點透，至于怎么出現的請大家去看一下zepto實現tap的源碼。 1、點透是什么 你可能碰到過在列表頁面上創建一個彈出層，彈出層有個關...
閱讀 1118·2021-11-23 10:05
閱讀 1799·2021-11-12 10:36
閱讀 1860·2019-08-30 15:56
閱讀 1695·2019-08-29 12:32
閱讀 3051·2019-08-28 18:04
閱讀 3434·2019-08-26 12:17
閱讀 2509·2019-08-26 11:35
閱讀 1250·2019-08-23 15:11
