關於移動端的click時間有延遲的問題(300ms延遲)


首先這個問題百度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
	});



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章