移動端touch事件

標籤：

當使用者手指放在行動裝置在螢幕上滑動會觸發的touch事件

webkit:

• touchstart——當手指觸碰螢幕時候發生。不管當前有多少只手指
• touchmove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會調用event的preventDefault()可以阻止預設情況的發生：阻止頁面滾動
• touchend——當手指離開螢幕時觸發
• touchcancel——系統停止跟蹤觸摸時候會觸發。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

TouchEvent

• touches：螢幕上所有手指的資訊
• targetTouches：手指在目的地區域的手指資訊
• changedTouches：最近一次觸發該事件的手指資訊
• touchend時，touches與targetTouches資訊會被刪除，changedTouches儲存的最後一次的資訊，最好用於計算手指資訊

參數資訊(changedTouches[0])

• clientX、clientY在顯示區的座標
• target：當前元素

參考：https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent

 

winphone 8:

• MSPointerDown——當手指觸碰螢幕時候發生。不管當前有多少只手指
• MSPointerMove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會調用css的html{-ms-touch-action: none;}可以阻止預設情況的發生：阻止頁面滾動
• MSPointerUp——當手指離開螢幕時觸發

 觸摸事件的響應順序1、ontouchstart 2、ontouchmove 3、ontouchend 4、onclick移動端click螢幕產生200-300 ms的延遲響應

行動裝置上的web網頁是有300ms延遲的，玩玩會造成按鈕點擊延遲甚至是點擊失效。

蘋果發布首款iphone上ios系統搭載的safari為了將適用於PC端上大螢幕的網頁能比較好的展示在手機端上，使用了雙擊縮放(double tap to zoom)的方案，比如你在手機上用瀏覽器開啟一個PC上的網頁，你可能在看到頁面內容雖然可以撐滿整個螢幕，但是字型、圖片都很小看不清，此時可以快速雙擊螢幕上的某一部分，你就能看清該部分放大後的內容，再次雙擊後能回到原始狀態。

雙擊縮放是指用手指在螢幕上快速點擊兩次，iOS 內建的 Safari 瀏覽器會將網頁縮放至原始比例。

原因就出在瀏覽器需要如何判斷快速點擊上，當使用者在螢幕上單擊某一個元素時候，例如跳轉連結<a href="#"></a>，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定使用者是單純要點選連結還是要雙擊該部分地區進行縮放操作，所以，捕獲第一次單擊後，瀏覽器會先Hold一段時間touch，如果在touch時間區間裡使用者未進行下一次點擊，則瀏覽器會做單擊跳轉連結的處理，如果touch時間裡使用者進行了第二次單擊操作，則瀏覽器會禁止跳轉，轉而進行對該部分地區頁面的縮放操作。那麼這個時間區間是有多少呢？

在IOS safari下，大概為300毫秒。這就是延遲的由來。造成的後果使用者純粹單擊頁面，頁面需要過一段時間才響應，給使用者慢體驗感覺，對於web開發人員來說是，頁面js捕獲click事件的回呼函數處理，需要300ms後才生效，也就間接導致影響其他商務邏輯的處理。

解決方案：

• fastclick可以解決在手機上點擊事件的300ms延遲
• zepto的touch模組，tap事件也是為瞭解決在click的延遲問題

ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉

ios使用者點擊一個連結，會出現一個半透明灰色遮罩, 如果想要禁用，可設定-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最後一位設定為0就可以去除半透明灰色遮罩。

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

部分android系統中元素被點擊時產生的邊框怎麼去掉

android使用者點擊一個連結，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設定-webkit-tap-highlight-color的alpha值為0去除部分機器內建的效果。

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)-webkit-user-modify:read-write-plaintext-only; }

-webkit-user-modify有個副作用，就是IME不再能夠輸入多個字元

另外，有些機型去除不了，如小米2

對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤。

wp系統a、input標籤被點擊時產生的半透明灰色背景怎麼去掉

<meta name="msapplication-tap-highlight" content="no">

 

移動端touch事件