為什么移動端點擊事件要加300ms延遲呢？

早在 2007 年初，蘋果公司在發布首款 iPhone 前夕，遇到一個問題：當時的網站都是為大屏幕設備所設計的。于是蘋果的工程師們做了一些約定，應對 iPhone 這種小屏幕瀏覽桌面端站點的問題。

這當中最出名的，當屬雙擊縮放(double tap to zoom)，這也是會有上述 300 毫秒延遲的主要原因。

雙擊縮放，顧名思義，即用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。 那么這和 300 毫秒延遲有什么聯系呢？

假定這么一個場景： 用戶在 iOS Safari 里邊點擊了一個鏈接。由于用戶可以進行雙擊縮放或者雙擊滾動的操作，當用戶一次點擊屏幕之后，瀏覽器并不能立刻判斷用戶是確實要打開這個鏈接，還是想要進行雙擊操作。因此，iOS Safari 就等待 300 毫秒，以判斷用戶是否再次點擊了屏幕。 鑒于iPhone的成功，其他移動瀏覽器都復制了 iPhone Safari 瀏覽器的多數約定，包括雙擊縮放，幾乎現在所有的移動端瀏覽器都有這個功能。那時人們剛剛接觸移動端的頁面，不會在意這個300ms的延時問題，可是如今移動端如雨后春筍，用戶對體驗的要求也更高，這300ms帶來的卡頓慢慢變得讓人難以接受。

那么如何解決300ms延遲問題呢？

我們就推薦一種最有效、最方便的解決方案，大家應該都用過這個方法，那就是FastClick.js。

FastClick 是 FT Labs 專門為解決移動端瀏覽器 300 毫秒點擊延遲問題所開發的一個輕量級的庫。FastClick的實現原理是在檢測到touchend事件的時候，會通過DOM自定義事件立即出發模擬一個click事件，并把瀏覽器在300ms之后的click事件阻止掉。

如何使用FastClick

npm install fastclick -S

如何你是vue項目可以在main.js里面直接引入，當然這樣是全局的，如果你需要某個頁面用到，那就單個頁面引入。

//引入 import fastClick from 'fastclick' //初始化FastClick實例。在頁面的DOM文檔加載完成后 fastClick.attach(document.body)

如果你用過FastClick在移動端，就會發現有一個體驗很不好的問題，某些ios上，點擊輸入框想喚啟軟鍵盤，觸點不是很靈敏，必須重壓或長按才能成功喚啟，快速點擊是不會喚啟軟鍵盤的。

如何解決ios input框喚啟軟鍵盤不靈敏問題？

/*** @param {EventTarget|Element} targetElement*/ FastClick.prototype.focus = function(targetElement) {var length;// Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {length = targetElement.value.length;targetElement.focus();// 加入這一句話targetElement.setSelectionRange(length, length);} else {targetElement.focus();} };

你可以直接去node_module里找到fastClick文件修改focus方法，但是不建議這樣做。如果以后npm install，就會被覆蓋。

建議你在引用fastclick的地方，重寫focus方法。如vue項目，你可以在main.js文件里面，引入fastclick模塊后，重寫focus方法。

總結

以上是生活随笔為你收集整理的vue 全局键盘_如何解决ios input框唤起软键盘不灵敏问题？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。