移動web終端互動最佳化

標籤：

在行動裝置上沒有了滑鼠輸入，hover等一些滑鼠事件不再生效，取而代之的是觸摸事件touch

移動web頁面上的click事件響應都要慢300ms

300ms延遲怎麼破？

使用Tap事件代替click事件

Tap事件一般引用移動架構庫Zepto.js

tap點透bug:若一個btn上面有個遮罩的話，當點擊遮罩時不僅會促發遮罩上的點擊事件也會觸發btn上的點擊事件

click事件和tap事件觸發過程

touch事件：

觸摸才是行動裝置互動的核心事件

touchstart:手指觸控螢幕幕觸發（已經有手指放在螢幕上不會觸發）

touchmove:手指在螢幕上滑動，連續觸發

touchend:手指離開螢幕時觸發

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

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

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

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

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

touch事件的bug:

彈性滾動：當用戶端的頁面滾動到頂部或底部的時候，捲軸會收縮並讓我們多滾動一定距離。通過緩衝反彈的效果，帶給使用者良好的體驗

移動web頁面也擁有這樣的能力，但滾動有幾種情況需要考慮，

body層的滾動：（系統特殊化處理）

內建彈性滾動：overflow:hidden（失效），GIF和定時器暫停

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

局部滾動開啟彈性滾動：

  body{      overflow:scroll;     -webkit-overflow-scrolling:touch;  } 

註：android不支援原生的彈性滾動！但可以藉助第三方庫iScroll來實現

下拉重新整理：頂端下拉一小點距離頁面彈性滾動向下

上拉載入

使用scroll事件而不是touch事件(android有bug)

常見bug解決方案：

移動web終端互動最佳化