1、移動web頁面上click事件響應有300ms延遲

原因：移動設備訪問的web頁面都是PC上的頁面。在默認viewport（980px）的頁面往往需要“雙擊”或“捏開”放大頁面。而正是為了確認用戶是“雙擊”還是“單擊”。

safari 需要300ms 的延遲來判斷。而後來的iphone,android也沿用這樣的設計。

舉例：如果你點擊一下，在300ms內再點擊第二次就認為是雙擊事件。

1.1） 如何解決？

利用tap事件代替click

自定義tap事件原理：

在touchstart、touchend時記錄時間、手指位置，在touchend時進行比較，如果手機位置為同一位置（或允許移動一個非常熊德位移值）且時間間隔較短（一般認為是200ms）

過程中未曾觸發過touchmove。即可認為觸發了手持設備上的“click”,一般稱它為“tap”.(一般使用zepto.js框架)

1.2）問題： Tap “點透”的bug;描述： 點擊按鈕最上面的蒙層，但是蒙層下的按鈕也會觸發。

點透發生過程： touchstart , touchend蒙層消失， 此時由於300ms導致下面的click觸發

關於tap 穿透的解決方案：

①使用緩動動畫，過渡300ms的延遲。

② 中間層dom元素的加入，讓中間接受這個“穿透”事件

③ “上下”都使用tap事件，原理上解決tap 透傳事件（但不可避免原生標簽的click事件）

④ 改用fastclick的庫（聽過最新的zepto已經fixed掉這個bug）

2、tap事件為自定義事件，基於touch基礎事件。

2.1）觸摸才是移動設備的交互核心事件。

touchstart: 手指觸摸屏幕觸發（已經有手指放屏幕上不會觸發）

touchmove： 手指在屏幕上滑動，連續觸發

touchend: 手指離開屏幕時觸發

touchcancel:系統取消touch時候觸發（不常用）

2.2）除了常見的事件屬性外，觸摸事件包含專有的觸摸屬性。

touches: 跟蹤觸摸操作的touch對象數組。

targetTouches: 特定事件目標的touch對象數組；

changeTouches: 上次觸摸改變的touch 對象數組

2.3）每個touch對象包含屬性--根據touch對象跟蹤觸摸具體位置，從而判斷觸摸交互或手勢事件

clientX: 觸摸目標在視口中的X坐標，clientY

pageX: 觸摸目標在頁面中的X坐標（包含滾動），pageY

screenX：觸摸目標在屏幕中的X坐標，screenY

target: 觸摸的DOM節點目標

identifier: 標識觸摸的唯一ID

2.4) Android 4.0,4.1，4.4只會觸發一次touchstart,一次touchmove,touchend不觸發

解決方案： 在touchmove中加入：event.preventDefault()---------touchmove多次觸發，touchend 結束觸發

導致問題： 默認行為不發生，如：scroll,導致頁面不滾動

2.5）常用touch相關的交互效果

① 彈性滾動

當客戶端的頁面滾動到頂部或底部時候，滾動條會收縮並讓我們多滑動一定距離。通過緩沖反彈的效果，帶給用戶良好的體驗。

但滾動有幾種情況：

1、body層滾動：自帶彈性滾動，overflow: hidden 失效，gif和定時器暫停

2、局部滾動：沒有彈性滾動，沒有滾動慣性，不流暢

如何開啟？ body { overflow： scroll；-webkit-overflow-scrolling: touch; }

註意： Android不支持原生的彈性滾動，但是可以借助第三方庫iScroll來實現

② 下拉刷新

③ 上拉加載：使用scroll事件，而不是touch事件

移動端交互優化