解析)
前端移動開發(fā)【免費下載鏈接】fastclickPolyfill to remove click delays on browsers with touch UIs項目地址https://gitcode.com/gh_mirrors/fa/fastclick點擊查看免費下載FastClick 是一個輕量級的前端 Polyfill用于消除移動瀏覽器中物理點擊tap到 click 事件觸發(fā)之間約 300ms 的延遲讓 Web 應用在觸屏設備上獲得更接近原生的即時響應。本文以 README.md 為主線結(jié)合 lib/fastclick.js 源碼、Makefile 構(gòu)建腳本與 examples/ 示例系統(tǒng)講解 FastClick 的延遲成因、兼容性邊界、五種接入方式、needsclick高級用法及底層實現(xiàn)原理幫助你在引入或維護該庫時快速掌握完整的技術細節(jié)。為什么存在 300ms 延遲移動瀏覽器在用戶點擊tap按鈕之后并不會立即觸發(fā)click事件而是會等待約 300ms。原因正如 Google 在 fast buttons 相關文檔中說明的瀏覽器需要等待這段時間來判斷用戶是否正在進行雙擊double tap操作——如果立即觸發(fā)click就無法區(qū)分單擊與雙擊縮放手勢。這 300ms 的等待時間會讓頁面交互產(chǎn)生明顯的滯后感。FastClick 的目標就是在不干擾現(xiàn)有業(yè)務邏輯的前提下讓觸屏上的點擊響應盡可能即時提升應用的操作流暢度。需要特別留意截至 2015 年底大多數(shù)移動瀏覽器尤其是 Chrome 和 Safari已經(jīng)不再存在 300ms 觸摸延遲因此 FastClick 在新版瀏覽器上不再帶來收益反而可能引入 bugs。是否使用 FastClick請結(jié)合你的目標用戶群體與瀏覽器環(huán)境慎重決策。FastClick 如何工作源碼級原理FastClick 由 FT LabsFinancial Times 旗下實驗室開發(fā)核心實現(xiàn)位于 lib/fastclick.js通過監(jiān)聽 touch 事件并在touchend觸發(fā)的第一時間合成synthesise并派發(fā)一個 click 事件同時抑制瀏覽器隨后產(chǎn)生的原生 click從而把點擊事件提前到觸摸結(jié)束時立刻觸發(fā)。監(jiān)聽的事件與調(diào)用鏈FastClick(layer, options)構(gòu)造函數(shù)會在指定的 layer 上注冊以下事件監(jiān)聽器lib/fastclick.jsAndroid 設備額外監(jiān)聽mouseover、mousedown、mouseup捕獲階段click捕獲階段touchstart、touchmove、touchend、touchcancel冒泡階段。整個流程的核心是onTouchStart→onTouchMove→onTouchEnd的狀態(tài)機onTouchStartlib/fastclick.js記錄觸摸起點坐標touchStartX/touchStartY、目標元素、時間戳并處理 iOS 上文本選擇、重復 touch identifier、滾動層fling scroll等特殊情況。onTouchMovelib/fastclick.js若手指移動超過touchBoundary默認 10px或目標元素變化則判定為滾動而非點擊取消點擊追蹤。onTouchEndlib/fastclick.js驗證點擊有效性后對不需要原生 click 的元素調(diào)用event.preventDefault()并執(zhí)行sendClick()立即派發(fā)合成 click。合成 click 的派發(fā)sendClick()lib/fastclick.js使用document.createEvent(MouseEvents)創(chuàng)建事件initMouseEvent注入觸摸點的屏幕坐標與客戶區(qū)坐標并設置clickEvent.forwardedTouchEvent true標記最后通過targetElement.dispatchEvent(clickEvent)派發(fā)。這樣業(yè)務代碼里原有的click監(jiān)聽器無需任何改動即可繼續(xù)工作。阻止重復 click 與幽靈點擊合成 click 派發(fā)后瀏覽器隨后產(chǎn)生的原生 click 會被onMouselib/fastclick.js與onClicklib/fastclick.js攔截通過stopImmediatePropagation()/stopPropagation()preventDefault()阻止事件繼續(xù)傳播避免同一元素上出現(xiàn)雙份 click 回調(diào)。對于不支持Event.prototype.stopImmediatePropagation的舊瀏覽器如 Android 2代碼中提供了覆蓋addEventListener/removeEventListener的兼容 hacklib/fastclick.js以callback.hijacked包裝回調(diào)并按event.propagationStopped過濾。可配置的選項構(gòu)造函數(shù)暴露了三個可覆蓋的默認配置項lib/fastclick.js選項默認值說明touchBoundary10手指在touchstart與touchend之間允許移動的最大像素距離超過即視為滾動、取消點擊追蹤tapDelay200兩次 tap 之間的最小時間間隔毫秒用于阻止快速雙擊產(chǎn)生的幽靈點擊phantom clicks對應 issue #36tapTimeout700單次 tap 允許的最長時間毫秒touchend距touchstart超過該值則不再派發(fā)合成 click使用時通過FastClick.attach(layer, options)傳入覆蓋值例如FastClick.attach(document.body, { touchBoundary: 8, tapDelay: 250, tapTimeout: 600 });兼容性FastClick 已作為 FT Web App 的一部分部署并在以下移動瀏覽器上經(jīng)過驗證iOS 3 及以上的 Mobile SafariiOS 5 及以上的 ChromeAndroidICS上的 ChromeOpera Mobile 11.5 及以上Android 2 以來的 Android BrowserPlayBook OS 1 及以上。源碼層面通過navigator.userAgent檢測做了大量設備特判包括deviceIsWindowsPhone、deviceIsAndroid、deviceIsIOS、deviceIsIOS4、deviceIsIOSWithBadTarget、deviceIsBlackBerry10等lib/fastclick.js分別處理 iOS 4 select 元素、iOS 6-7 目標元素重定位、BlackBerry 10 等兼容性分支。什么時候不需要 FastClickFastClick 內(nèi)部通過FastClick.notNeeded(layer)lib/fastclick.js做自動檢測命中以下任一場景時不綁定任何監(jiān)聽器桌面瀏覽器window.ontouchstart未定義時不附加任何監(jiān)聽器Android 上的 Chrome 32當 viewport meta 中包含widthdevice-width且頁面滾動寬度不超過視口寬度時已無 300ms 延遲帶user-scalableno的 ChromeAndroid 全版本但需注意user-scalableno會同時禁用雙指縮放可能帶來無障礙accessibility方面的顧慮BlackBerry 10.3在同樣滿足 viewport 條件時IE10/IE11元素上設置了-ms-touch-action: manipulation或touch-action: manipulationnone同樣生效時雙指雙擊縮放被禁用不再需要 FastClickFirefox 27在不可縮放的 viewport 條件下無 tap 延遲。對應地在 HTML 中聲明以下 viewport meta 即可讓新版瀏覽器天然消除延遲meta nameviewport contentwidthdevice-width, initial-scale1對于 IE11可以僅對鏈接、按鈕等特定元素使用 CSS 屬性touch-action: manipulation;禁用雙擊縮放IE10 則使用-ms-touch-action: manipulation。需要說明的是FastClick.notNeeded的自動檢測依賴頁面加載后的 meta 標簽與實際滾動寬度因此腳本必須在頁面布局就緒后實例化。接入方式1. 傳統(tǒng) script 標簽將 fastclick.js 加入你的 JavaScript bundle或在 HTML 頁面中引入script typeapplication/javascript src/path/to/fastclick.js/script腳本必須在頁面上任何元素實例化 FastClick 之前加載完成。推薦在body上實例化官方推薦用法if (addEventListener in document) { document.addEventListener(DOMContentLoaded, function() { FastClick.attach(document.body); }, false); }2. jQuery$(function() { FastClick.attach(document.body); });3. Browserify / CommonJS使用 Browserify 或其他 CommonJS 風格模塊系統(tǒng)時require(fastclick)直接返回FastClick.attach函數(shù)因此最簡用法是var attachFastClick require(fastclick); attachFastClick(document.body);這一點與源碼底部的模塊導出邏輯對應CommonJS 環(huán)境下執(zhí)行module.exports FastClick.attach并額外暴露module.exports.FastClicklib/fastclick.js。4. 使用壓縮版Minified在當前倉庫根目錄運行make即可通過 Closure Compiler REST API 構(gòu)建壓縮版Makefilemake壓縮產(chǎn)物輸出到build/fastclick.min.js。構(gòu)建腳本還通過output_infostatistics打印壓縮統(tǒng)計信息。倉庫也提供了預壓縮版本的下載渠道通過 FT 的構(gòu)建服務預壓縮版把FastClick對象暴露為Origami.fastclick同樣具備 Browserify/CommonJS APIvar attachFastClick Origami.fastclick; attachFastClick(document.body);5. AMD 加載FastClick 支持 AMDAsynchronous Module Definition可與 RequireJS 等加載器配合實現(xiàn)懶加載。注意AMD 風格 require 返回的是完整的FastClick對象而不是FastClick.attachvar FastClick require(fastclick); FastClick.attach(document.body, options);6. 包管理器安裝可通過 Component、npm 或 Bower 安裝。倉庫內(nèi)已提供 package.json版本 1.0.6main指向lib/fastclick.js與 bower.json。Ruby 環(huán)境有第三方 gemfastclick-rails.NET 環(huán)境有 NuGet 包FastClick。高級用法用needsclick類忽略特定元素有時你需要讓 FastClick忽略某些元素。最簡單的方式是給元素加上needsclick類a classneedsclickIgnored by FastClick/a源碼中needsClick()lib/fastclick.js會檢測元素是否帶有needsclick類命中則放行原生 click。此外button、select、textareadisabled 時、inputdisabled以及 iOS 6 上 type 為file的輸入框、label、iframe、video元素也會被自動判定為需要原生 click。場景一必須使用瀏覽器原生非合成clickFastClick 內(nèi)部通過document.createEvent在touchend觸發(fā)時立即派發(fā)合成 click并抑制瀏覽器隨后產(chǎn)生的原生 click。但在某些情況下原生 click 是必需的——例如 examples/focus.html 演示的在 click 處理器中觸發(fā) input 聚焦場景iOS 5.0 之前觸摸事件處理器不允許以編程方式觸發(fā)其他元素聚焦只有needsclick元素放行原生 click 才能成功讓輸入框獲得焦點。示例頁面中元素 A 走合成 click 無法聚焦元素 B帶needsclick則能正常聚焦。場景二Twitter Bootstrap 2.2.2 下拉菜單Bootstrap 2.2.2 的下拉菜單自帶touchstart監(jiān)聽器需要讓 FastClick 忽略這些元素否則觸摸設備上點擊下拉按鈕時FastClick 與 Bootstrap 會各執(zhí)行一次合成 click導致下拉菜單剛打開就被立即關閉a classdropdown-toggle needsclick>贊分享前端移動開發(fā)【免費下載鏈接】fastclickPolyfill to remove click delays on browsers with touch UIs項目地址https://gitcode.com/gh_mirrors/fa/fastclick點擊查看免費下載相關推薦Klein庫性能測試報告與GLM、RTM的運算效率對比Klein庫性能測試報告與GLM、RTM的運算效率對比 Klein是一個專注于幾何代數(shù)運算的SIMD優(yōu)化庫基于P R _{3, 0, 1} 代數(shù)體系設計。本VUX 移動端移除 300ms 點擊延遲FastClick 的正確接入方式與注意事項VUX 移動端移除 300ms 點擊延遲FastClick 的正確接入方式與注意事項 導讀 在移動端瀏覽器中雙擊縮放檢測機制會給普通點擊帶來約 300msUI組件前端Meteor fastclick 包消除移動端 300ms 點擊延遲的機制、用法與棄用說明Meteor fastclick 包消除移動端 300ms 點擊延遲的機制、用法與棄用說明 本文以 Meteor 倉庫中 packages/deprecate后端前端開發(fā)工具移動開發(fā)上一篇TQVaultAE泰坦之旅裝備管理的終極解決方案告別倉庫爆滿煩惱下一篇從硬件報告到 EFI 生成OpCore-Simplify 黑蘋果圖形化配置完整指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 FastClick 移動端點擊延遲消除方案：300ms 延遲原理、接入方式與源碼實現(xiàn)解析
前端移動開發(fā)【免費下載鏈接】fastclickPolyfill to remove click delays on browsers with touch UIs項目地址https://gitcode.com/gh_mirrors/fa/fastclick點擊查看免費下載FastClick 是一個輕量級的前端 Polyfill用于消除移動瀏覽器中物理點擊tap到 click 事件觸發(fā)之間約 300ms 的延遲讓 Web 應用在觸屏設備上獲得更接近原生的即時響應。本文以 README.md 為主線結(jié)合 lib/fastclick.js 源碼、Makefile 構(gòu)建腳本與 examples/ 示例系統(tǒng)講解 FastClick 的延遲成因、兼容性邊界、五種接入方式、needsclick高級用法及底層實現(xiàn)原理幫助你在引入或維護該庫時快速掌握完整的技術細節(jié)。為什么存在 300ms 延遲移動瀏覽器在用戶點擊tap按鈕之后并不會立即觸發(fā)click事件而是會等待約 300ms。原因正如 Google 在 fast buttons 相關文檔中說明的瀏覽器需要等待這段時間來判斷用戶是否正在進行雙擊double tap操作——如果立即觸發(fā)click就無法區(qū)分單擊與雙擊縮放手勢。這 300ms 的等待時間會讓頁面交互產(chǎn)生明顯的滯后感。FastClick 的目標就是在不干擾現(xiàn)有業(yè)務邏輯的前提下讓觸屏上的點擊響應盡可能即時提升應用的操作流暢度。需要特別留意截至 2015 年底大多數(shù)移動瀏覽器尤其是 Chrome 和 Safari已經(jīng)不再存在 300ms 觸摸延遲因此 FastClick 在新版瀏覽器上不再帶來收益反而可能引入 bugs。是否使用 FastClick請結(jié)合你的目標用戶群體與瀏覽器環(huán)境慎重決策。FastClick 如何工作源碼級原理FastClick 由 FT LabsFinancial Times 旗下實驗室開發(fā)核心實現(xiàn)位于 lib/fastclick.js通過監(jiān)聽 touch 事件并在touchend觸發(fā)的第一時間合成synthesise并派發(fā)一個 click 事件同時抑制瀏覽器隨后產(chǎn)生的原生 click從而把點擊事件提前到觸摸結(jié)束時立刻觸發(fā)。監(jiān)聽的事件與調(diào)用鏈FastClick(layer, options)構(gòu)造函數(shù)會在指定的 layer 上注冊以下事件監(jiān)聽器lib/fastclick.jsAndroid 設備額外監(jiān)聽mouseover、mousedown、mouseup捕獲階段click捕獲階段touchstart、touchmove、touchend、touchcancel冒泡階段。整個流程的核心是onTouchStart→onTouchMove→onTouchEnd的狀態(tài)機onTouchStartlib/fastclick.js記錄觸摸起點坐標touchStartX/touchStartY、目標元素、時間戳并處理 iOS 上文本選擇、重復 touch identifier、滾動層fling scroll等特殊情況。onTouchMovelib/fastclick.js若手指移動超過touchBoundary默認 10px或目標元素變化則判定為滾動而非點擊取消點擊追蹤。onTouchEndlib/fastclick.js驗證點擊有效性后對不需要原生 click 的元素調(diào)用event.preventDefault()并執(zhí)行sendClick()立即派發(fā)合成 click。合成 click 的派發(fā)sendClick()lib/fastclick.js使用document.createEvent(MouseEvents)創(chuàng)建事件initMouseEvent注入觸摸點的屏幕坐標與客戶區(qū)坐標并設置clickEvent.forwardedTouchEvent true標記最后通過targetElement.dispatchEvent(clickEvent)派發(fā)。這樣業(yè)務代碼里原有的click監(jiān)聽器無需任何改動即可繼續(xù)工作。阻止重復 click 與幽靈點擊合成 click 派發(fā)后瀏覽器隨后產(chǎn)生的原生 click 會被onMouselib/fastclick.js與onClicklib/fastclick.js攔截通過stopImmediatePropagation()/stopPropagation()preventDefault()阻止事件繼續(xù)傳播避免同一元素上出現(xiàn)雙份 click 回調(diào)。對于不支持Event.prototype.stopImmediatePropagation的舊瀏覽器如 Android 2代碼中提供了覆蓋addEventListener/removeEventListener的兼容 hacklib/fastclick.js以callback.hijacked包裝回調(diào)并按event.propagationStopped過濾。可配置的選項構(gòu)造函數(shù)暴露了三個可覆蓋的默認配置項lib/fastclick.js選項默認值說明touchBoundary10手指在touchstart與touchend之間允許移動的最大像素距離超過即視為滾動、取消點擊追蹤tapDelay200兩次 tap 之間的最小時間間隔毫秒用于阻止快速雙擊產(chǎn)生的幽靈點擊phantom clicks對應 issue #36tapTimeout700單次 tap 允許的最長時間毫秒touchend距touchstart超過該值則不再派發(fā)合成 click使用時通過FastClick.attach(layer, options)傳入覆蓋值例如FastClick.attach(document.body, { touchBoundary: 8, tapDelay: 250, tapTimeout: 600 });兼容性FastClick 已作為 FT Web App 的一部分部署并在以下移動瀏覽器上經(jīng)過驗證iOS 3 及以上的 Mobile SafariiOS 5 及以上的 ChromeAndroidICS上的 ChromeOpera Mobile 11.5 及以上Android 2 以來的 Android BrowserPlayBook OS 1 及以上。源碼層面通過navigator.userAgent檢測做了大量設備特判包括deviceIsWindowsPhone、deviceIsAndroid、deviceIsIOS、deviceIsIOS4、deviceIsIOSWithBadTarget、deviceIsBlackBerry10等lib/fastclick.js分別處理 iOS 4 select 元素、iOS 6-7 目標元素重定位、BlackBerry 10 等兼容性分支。什么時候不需要 FastClickFastClick 內(nèi)部通過FastClick.notNeeded(layer)lib/fastclick.js做自動檢測命中以下任一場景時不綁定任何監(jiān)聽器桌面瀏覽器window.ontouchstart未定義時不附加任何監(jiān)聽器Android 上的 Chrome 32當 viewport meta 中包含widthdevice-width且頁面滾動寬度不超過視口寬度時已無 300ms 延遲帶user-scalableno的 ChromeAndroid 全版本但需注意user-scalableno會同時禁用雙指縮放可能帶來無障礙accessibility方面的顧慮BlackBerry 10.3在同樣滿足 viewport 條件時IE10/IE11元素上設置了-ms-touch-action: manipulation或touch-action: manipulationnone同樣生效時雙指雙擊縮放被禁用不再需要 FastClickFirefox 27在不可縮放的 viewport 條件下無 tap 延遲。對應地在 HTML 中聲明以下 viewport meta 即可讓新版瀏覽器天然消除延遲meta nameviewport contentwidthdevice-width, initial-scale1對于 IE11可以僅對鏈接、按鈕等特定元素使用 CSS 屬性touch-action: manipulation;禁用雙擊縮放IE10 則使用-ms-touch-action: manipulation。需要說明的是FastClick.notNeeded的自動檢測依賴頁面加載后的 meta 標簽與實際滾動寬度因此腳本必須在頁面布局就緒后實例化。接入方式1. 傳統(tǒng) script 標簽將 fastclick.js 加入你的 JavaScript bundle或在 HTML 頁面中引入script typeapplication/javascript src/path/to/fastclick.js/script腳本必須在頁面上任何元素實例化 FastClick 之前加載完成。推薦在body上實例化官方推薦用法if (addEventListener in document) { document.addEventListener(DOMContentLoaded, function() { FastClick.attach(document.body); }, false); }2. jQuery$(function() { FastClick.attach(document.body); });3. Browserify / CommonJS使用 Browserify 或其他 CommonJS 風格模塊系統(tǒng)時require(fastclick)直接返回FastClick.attach函數(shù)因此最簡用法是var attachFastClick require(fastclick); attachFastClick(document.body);這一點與源碼底部的模塊導出邏輯對應CommonJS 環(huán)境下執(zhí)行module.exports FastClick.attach并額外暴露module.exports.FastClicklib/fastclick.js。4. 使用壓縮版Minified在當前倉庫根目錄運行make即可通過 Closure Compiler REST API 構(gòu)建壓縮版Makefilemake壓縮產(chǎn)物輸出到build/fastclick.min.js。構(gòu)建腳本還通過output_infostatistics打印壓縮統(tǒng)計信息。倉庫也提供了預壓縮版本的下載渠道通過 FT 的構(gòu)建服務預壓縮版把FastClick對象暴露為Origami.fastclick同樣具備 Browserify/CommonJS APIvar attachFastClick Origami.fastclick; attachFastClick(document.body);5. AMD 加載FastClick 支持 AMDAsynchronous Module Definition可與 RequireJS 等加載器配合實現(xiàn)懶加載。注意AMD 風格 require 返回的是完整的FastClick對象而不是FastClick.attachvar FastClick require(fastclick); FastClick.attach(document.body, options);6. 包管理器安裝可通過 Component、npm 或 Bower 安裝。倉庫內(nèi)已提供 package.json版本 1.0.6main指向lib/fastclick.js與 bower.json。Ruby 環(huán)境有第三方 gemfastclick-rails.NET 環(huán)境有 NuGet 包FastClick。高級用法用needsclick類忽略特定元素有時你需要讓 FastClick忽略某些元素。最簡單的方式是給元素加上needsclick類a classneedsclickIgnored by FastClick/a源碼中needsClick()lib/fastclick.js會檢測元素是否帶有needsclick類命中則放行原生 click。此外button、select、textareadisabled 時、inputdisabled以及 iOS 6 上 type 為file的輸入框、label、iframe、video元素也會被自動判定為需要原生 click。場景一必須使用瀏覽器原生非合成clickFastClick 內(nèi)部通過document.createEvent在touchend觸發(fā)時立即派發(fā)合成 click并抑制瀏覽器隨后產(chǎn)生的原生 click。但在某些情況下原生 click 是必需的——例如 examples/focus.html 演示的在 click 處理器中觸發(fā) input 聚焦場景iOS 5.0 之前觸摸事件處理器不允許以編程方式觸發(fā)其他元素聚焦只有needsclick元素放行原生 click 才能成功讓輸入框獲得焦點。示例頁面中元素 A 走合成 click 無法聚焦元素 B帶needsclick則能正常聚焦。場景二Twitter Bootstrap 2.2.2 下拉菜單Bootstrap 2.2.2 的下拉菜單自帶touchstart監(jiān)聽器需要讓 FastClick 忽略這些元素否則觸摸設備上點擊下拉按鈕時FastClick 與 Bootstrap 會各執(zhí)行一次合成 click導致下拉菜單剛打開就被立即關閉a classdropdown-toggle needsclick>贊分享前端移動開發(fā)【免費下載鏈接】fastclickPolyfill to remove click delays on browsers with touch UIs項目地址https://gitcode.com/gh_mirrors/fa/fastclick點擊查看免費下載相關推薦Klein庫性能測試報告與GLM、RTM的運算效率對比Klein庫性能測試報告與GLM、RTM的運算效率對比 Klein是一個專注于幾何代數(shù)運算的SIMD優(yōu)化庫基于P R _{3, 0, 1} 代數(shù)體系設計。本VUX 移動端移除 300ms 點擊延遲FastClick 的正確接入方式與注意事項VUX 移動端移除 300ms 點擊延遲FastClick 的正確接入方式與注意事項 導讀 在移動端瀏覽器中雙擊縮放檢測機制會給普通點擊帶來約 300msUI組件前端Meteor fastclick 包消除移動端 300ms 點擊延遲的機制、用法與棄用說明Meteor fastclick 包消除移動端 300ms 點擊延遲的機制、用法與棄用說明 本文以 Meteor 倉庫中 packages/deprecate后端前端開發(fā)工具移動開發(fā)上一篇TQVaultAE泰坦之旅裝備管理的終極解決方案告別倉庫爆滿煩惱下一篇從硬件報告到 EFI 生成OpCore-Simplify 黑蘋果圖形化配置完整指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考