1. 相關事件在 mobile 與 pc 之間的差異
1.1click事件的300ms延遲問題：
2023年第一代iphone發布，瀏覽器自帶了乙個功能：雙擊縮放。
雙擊頁面的時候，瀏覽器會智慧型的縮放當前頁面到原始大小。
雙擊縮放的原理就是，當你click一次之後，會經過300ms之後檢測是否再有一次click，
如果有的話，就會縮放頁面。否則的話就是乙個click事件。
所以，當你想執行click操作的時候，就感覺到了」卡頓」。
1.2dblclick事件失效：
由於雙擊縮放的存在，pc端的dblclick事件也失效了。
1.3 新增了touch事件
隨著觸屏裝置的普及，w3c為移動端web新增了touch事件。
2.移動端 touch 事件
2.1touch事件包括4個事件：
touchstart：當在螢幕上按下手指時觸發
touchmove：當在螢幕上移動手指時觸發
touchend：當在螢幕上抬起手指時觸發
touchcancel：當一些更高階別的事件發生的時候會取消當前的touch操作，即觸發touchcancel。（**接入、彈出資訊、暫停遊戲、存檔等操作）
2.2 三個基本引數
touchevent：表示觸控狀態發生改變時觸發的event （通過檢查觸控事件的 touchevent.type 屬性來確定當前事件屬於哪種型別。如：touchstart、touchmove）
touch：表示使用者和觸屏裝置之間接觸時單獨的互動點(a single point of contact)
identifier:表示每 1 個 touch 物件 的獨一無二的 identifier。有了這個 identifier 可以確保你總能追蹤到這個 touch物件。
screenx:觸控點相對於螢幕左邊緣的 x 座標。
screeny:觸控點相對於螢幕上邊緣的 y 座標。
clientx:觸控點相對於瀏覽器的 viewport左邊緣的 x 座標。不會包括左邊的滾動距離。
clienty:觸控點相對於瀏覽器的 viewport上邊緣的 y 座標。不會包括上邊的滾動距離。
pagex:觸控點相對於 document的左邊緣的 x 座標。 與 clientx 不同的是，他包括左邊滾動的距離，如果有的話。
pagey:觸控點相對於 document的左邊緣的 y 座標。 與 clienty 不同的是，他包括上邊滾動的距離，如果有的話。
target:總是表示 手指最開始放在觸控裝置上的觸發點所在位置的 element。 即使已經移出了元素甚至移出了document, 他表示的element仍然不變
touchlist：代表乙個觸控螢幕上所有觸點的列表。（如果用三根手指接觸螢幕，touchlist 對於每根手指都會生成乙個 touch物件, 共計 3 個）
3.常規 touch 事件的封裝 （ 單擊、長按、左滑、右滑 ）
3.1 封裝前的基本使用
$('.wrap').addeventlistener('click',function
(e))
//長按(longtap)
varlongtaptimer;
$('.wrap').addeventlistener('touchstart', function
(e) , 750);
});$('.wrap').addeventlistener('touchmove', function
(e) );
$('.wrap').addeventlistener('touchend', function
(e) );
function
$(select)
function
longtap()
view code
3.2 封裝**
(function (window)view codemyquery.prototype =
},/*單擊事件：
* 為了規避click的300ms的延遲，自定義乙個單擊事件
* 當抬起手指的時候觸發
* 需要判斷手指落下和手指抬起的事件間隔，如果小於500ms表示單擊時間。
** 如果是大於等於500ms，算是長按時間
* */tap:
function
(handler)
break
; }}},
/*** 長按
* @param handler
*/longtag:
function
(handler) , 500)
break
;
case "touchmove":
cleartimeout(timerid)
break
;
case "touchend":
cleartimeout(timerid);
break
; }}},
/*** 左側滑動。
記錄手指按下的左邊，在離開的時候計算 deltax是否滿足左滑的條件
**/slideleft:
function
(handler)
break
; }}},
/*** 右側滑動。
**/slideright:
function
(handler)
break
; }}}
}window.$ = window.myquery =myquery;
})(window);
3.3 封裝使用
wrapview code
3.4 其他事件：上滑、下滑、雙擊、旋轉、縮放、拖動...
4.移動端手勢相關外掛程式
4.1 hammer.js
hammer.js 中文教程
基本使用
view code
touchevent
移動端互動手勢詳解及實現
移動端手勢測試
123 function var current 0 var imgs swipe img var pages num1 span 向左左邊滑動，index為下個顯示 active display nane pages的給當前的焦點樣式 swipe on swipeleft function e 向...
移動端的複雜手勢
寫前面 我存在的目的怎麼不起作用啊 上個星期又接到 我們運維美女的需求 其中大部分都是非常簡單的！不過其中有個東西我到是蠻感興趣的 就是類似下面這個 要想實現上面這個 就要使用多點觸控了 處理多點觸控手勢並不簡單 但也不是非常困難 但是 要能真正的使用 需要很多的知識結合起來！效果gif demo君...
移動端JS判斷手勢方向
原生js判斷手勢方向的解決思路 1 滑動螢幕事件使用html5 的touchstart滑動開始事件和touchend滑動結束事件。2 方向的判斷，以起點做平面座標系，與終點連線做直線，直線與x正半軸計算角度 我們以45度角為方向分割線，如 只要滑動角度大於等於45度且小於135度，則判斷它方向為向上...