移動端觸摸（touch）事件

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

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

項目需求，須要用到拖動事件。因爲不須要考慮IE8等低端瀏覽器的兼容性， 因此想到HTML5中的drag事件， 發現移動端 android & IOS 並不支持 drag 事件。如今讓咱們來介紹一下移動端的經常使用事件吧

1、click點擊事件

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

2、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){});

3、tap類觸碰事件

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

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

longTap: 手指長按屏幕會觸發

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

doubleTap: 手指雙擊屏幕會觸發

4、swipe滑動事件

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

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

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

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

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

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

 5、gesture手勢事件

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

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

 

 

 

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