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
注意： android不支援原生的彈性滾動，但是可以借助第三方庫iscroll來實現
② 下拉重新整理
③ 上拉載入：使用scroll事件，而不是touch事件
js移動端互動 移動端互動大綱篇
day01.基礎事件 1 touchstart介紹及使用 2 touchmove介紹及使用 3 touchend介紹及使用 4 案例分析 day02.event物件 1 取消預設事件 2 阻止冒泡 3 防止文字選中和阻止預設選單 4 滑鼠事件延遲 5 事件點透問題 6 案例分析 day03.觸控事件...
移動端資料互動
和移動端對接沒有明確的介面文件可謂是，瞎子摸馬啊！但是最終還是搞定了。json decode file get contents php input r true 這樣移動端post提交給後端的 json資料就可以正常接收處理了。關聯陣列 echo json encode array a aaa b...
移動web 終端互動優化
移動web頁面上的click事件相應都要慢上300ms 1.tap基礎事件 300ms延遲怎麼破？使用tap事件代替click事件 自定義 tap事件原理 在touchstart touchend時記錄時間 手指位置，在touchend時進行比較，如果手指位置為同一位置 或允許移動乙個非常小的位移值...