首先這個問題百度google一大堆,這裏不詳細闡述,只提供一種解決方案。
還是先說一下問題的由來:
問題由來
這要追溯至 2007 年初。蘋果公司在發佈首款 iPhone 前夕,遇到一個問題:當時的網站都是爲大屏幕設備所設計的。於是蘋果的工程師們做了一些約定,應對 iPhone 這種小屏幕瀏覽桌面端站點的問題。
這當中最出名的,當屬雙擊縮放(double tap to zoom),這也是會有上述 300 毫秒延遲的主要原因。雙擊縮放,顧名思義,即用手指在屏幕上快速點擊兩次,iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。
那麼這和 300 毫秒延遲有什麼聯繫呢?
假定這麼一個場景。用戶在 iOS Safari 裏邊點擊了一個鏈接。由於用戶可以進行雙擊縮放或者雙擊滾動的操作,當用戶一次點擊屏幕之後,瀏覽器並不能立刻判斷用戶是確實要打開這個鏈接,還是想要進行雙擊操作。因此,iOS Safari 就等待 300 毫秒,以判斷用戶是否再次點擊了屏幕。
鑑於iPhone的成功,其他移動瀏覽器都複製了 iPhone Safari 瀏覽器的多數約定,包括雙擊縮放,幾乎現在所有的移動端瀏覽器都有這個功能。之前人們剛剛接觸移動端的頁面,在欣喜的時候往往不會care這個300ms的延時問題,可是如今touch端界面如雨後春筍,用戶對體驗的要求也更高,這300ms帶來的卡頓慢慢變得讓人難以接受。
解決方案:
這裏提供一個插件 :tap.js
https://github.com/pukhalski/tap
關於這個插件的用法也很簡單:
首先是引入:
<script src="bower_components/tap/dist/tap.min.js"></script>
使用:
document.getElementById('any-element').addEventListener('tap', function (e) { // All the magic happens here });
如果配合jquery:
$('#any-element').on('tap', function (e) { // All the magic happens here });