移動端觸摸（touch）事件

目有個交互需要實現手指滑動的交互，pc端使用mousedown,mousemove,mouseup監聽實現。

但在ios設備上mousemove是不好監聽的，同類的方法是touchstart,touchmove,touchend。

項目需求，需要用到拖動事件。由於不需要考慮IE8等低端瀏覽器的兼容性， 所以想到HTML5中的drag事件， 發現移動端 android & IOS 並不支持 drag 事件。現在讓我們來介紹一下移動端的常用事件吧

一、click點擊事件

單擊事件，類似於PC端的click，但在移動端中，連續click的觸發有200ms ~ 300ms的延遲。

二、touch觸摸事件

觸摸事件，有touchstart touchmove touchend touchcancel 四種之分，常用的有：

touchstart：當有新手指觸控到綁定的元素，會觸發一次事件。　　

touchmove：當有手指放綁定的元素上會一直觸發，從觸發條件准確的說只有手指移動時才觸發。但是經過測試，這一項檢測十分靈敏，人為手指保持不動，系統也會偵測到細小的移動。所以會一直觸發。

touchend：當有手指從綁定元素上抬起，會觸發一次。

touchcancel：可由系統進行的觸發（不常用事件），比如手指觸摸屏幕的時候，突然alert了一下，或者系統中其他打斷了touch的行為，則可以觸發該事件。

2.1事件列表

在移動端中上面的三個觸摸事件每個事件都有以下列表

　　　　changedTouches：保存了所有引發事件的手指信息

　　　　targetTouches：保存了當前對象上所有觸摸點的列表;

　　　　touches：保存了當前所有觸碰屏幕的手指信息

 

2.1.1事件屬性(只讀屬性)

移動端觸摸事件屬性里的數組元素的屬性：每個事件有列表，每個事件列表還有以下屬性

　　　　pageX    //相對於頁面的 X 坐標,與 clientX 不同的是，他包括左邊滾動的距離，如果有的話。

　　　　pageY    //相對於頁面的 Y 坐標,與 clientY 不同的是，他包括上邊滾動的距離，如果有的話。

　　　　clientX  //相對於視區的 X 坐標，不會包括左邊的滾動距離。

　　　　clientY  //相對於視區的 Y 坐標，不會包括上邊的滾動距離。

　　　　screenX  //相對於屏幕的 X 坐標

　　　　screenY  //相對於屏幕的 Y 坐標

 

　　　　identifier  // 表示每 1 個 Touch 對象 的獨一無二的 identifier。有了這個 identifier 可以確保你總能追蹤到這個 Touch對象。

　　　　target    //手指所觸摸的 DOM 元素

　　　　Touch.radiusX    //能夠包圍用戶和觸摸平面的接觸面的最小橢圓的水平軸(X軸)半徑。這個值的單位和 screenX 相同。只讀屬性。 　　　　

　　　　Touch.radiusY    //能夠包圍用戶和觸摸平面的接觸面的最小橢圓的垂直軸(Y軸)半徑。這個值的單位和 screenY 相同。只讀屬性。 　　　　

　　　　Touch.rotationAngle   //它是這樣一個角度值：由radiusX 和 radiusY描述的正方向的橢圓，需要通過順時針旋轉這個角度值，才能最精確地覆蓋住用戶和觸摸平面的接觸面。只讀屬性。 　　　　

　　　　Touch.force   //手指擠壓觸摸平面的壓力大小，從0.0(沒有壓力)到1.0(最大壓力)的浮點數。只讀屬性。

 

var pos = {x:e.touches[0].clientX,y:e.touches[0].clientY}   /*獲取移動端拖動滑動坐標*/

const touchY = e.touches[0].clientY - 79;   //手指拖動豎坐標

 

比如：想獲取手指拖動滑動的坐標位置，直接使用event.clientX是不起作用的，要使用event.changedTouches[0].clientX才好,

如果是jquery的event對象，使用event.originalEvent.changedTouches[0].clientX。

調用事件方法：
（1）jquery方法：$(document).bind("touchend", function(e){}）；
（2）javascript方法：document.addEventListener("touchend",function(e){});

三、tap類觸碰事件

觸碰事件，我目前還不知道它和touch的區別，一般用於代替click事件，有tap longTap singleTap doubleTap四種之分，有時會用tap代替click事件

tap: 手指碰一下屏幕會觸發

longTap: 手指長按屏幕會觸發

singleTap: 手指碰一下屏幕會觸發

doubleTap: 手指雙擊屏幕會觸發

四、swipe滑動事件

滑動事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五種之分

swipe：手指在屏幕上滑動時會觸發

swipeLeft：手指在屏幕上向左滑動時會觸發

swipeRight：手指在屏幕上向右滑動時會觸發

swipeUp：手指在屏幕上向上滑動時會觸發

swipeDown：手指在屏幕上向下滑動時會觸發

 五、gesture手勢事件

當兩個手指觸摸屏幕時就會產生手勢，手勢通常會改變顯示項的大小，或者旋轉顯示項。有三個手勢事件，分別如下。

• gesturestart:當一個手指已經按在屏幕上面另一個手指有觸摸屏幕時觸發。
• gesturechange:當觸摸屏幕的任何一個手指的位置發生變化時觸發。
• gestureend:當任何一個手指從屏幕上面移開時觸發。

 

 

 

當有新手指觸控到綁定的元素，會觸發一次事件。