JS觸摸事件、手勢事件詳解

觸屏已經是我們身邊電子設備的常態了。觸摸事件當然也是隨著觸屏的出現，用戶使用最多的事件啦！
難道使用觸屏事件后，其他原來的鼠標事件就都不能用啦？當然不是，只不過不是那么好用啊。

針對鼠標事件，有哪些不適應？

dbclick

觸屏設備不支持雙擊事件。雙擊瀏覽器窗口，會放大畫面。

可以通過在head標簽內加上這么一行：

可以實現，我們編寫的頁面不會隨著用的手勢而放大縮小。

關于meta標簽，我還沒有研究過，罪過啊。

mouse

在觸屏上，我們單擊一個元素，會相應的觸發：mousemove mousedown mouseup click，所以當我們編寫移動客戶端界面時，可以為元素直接添加move事件，可以提高效率。

同時也會觸發mouseover與mouseout，測試結果，我發現，只有當頁面第一次刷新時，單擊元素，參會觸發mouseover事件。

隨著觸屏移動端設備的普及使用，W3C開始制定TouchEvent規范。

觸摸事件

該類事件會在用戶手指放在屏幕上面時，在屏幕上滑動時，或從屏幕上移開時觸發。具體來說有以下幾個觸摸事件。
1、touchstart

當手指放在屏幕上觸發。

2、touchmove

當手指在屏幕上滑動時，連續地觸發。

3、touchend

當手指從屏幕上離開時觸發。

4、touchcancel

當系統停止跟蹤時觸發，系統什么時候取消，文檔沒有明確的說明。

【總】以上四個，是w3c提供的觸摸事件，只針對觸摸設備，最常用的是前三個。

由于觸摸會導致屏幕動來動去，所以可以會在這些事件的事件處理函數內使用event.preventDefault()，來阻止屏幕的默認滾動。

除了常用的DOM屬性，觸摸事件還包含下列三個用于跟蹤觸摸的屬性。
1、touches：表示當前跟蹤的觸摸操作的touch對象的數組。

當一個手指在觸屏上時，event.touches.length=1,

當兩個手指在觸屏上時，event.touches.length=2，以此類推。
2、targetTouches：特定于事件目標的touch對象數組。

因為touch事件是會冒泡的，所以利用這個屬性指出目標對象。

3、changedTouches：表示自上次觸摸以來發生了什么改變的touch對象的數組。

每個touch對象都包含下列幾個屬性：
4、clientX：觸摸目標在視口中的x坐標。

clientY：觸摸目標在視口中的y坐標。

identifier：標識觸摸的唯一ID。

pageX：觸摸目標在頁面中的x坐標。

pageY：觸摸目標在頁面中的y坐標。

screenX：觸摸目標在屏幕中的x坐標。

screenY：觸摸目標在屏幕中的y坐標。

target：觸摸的DOM節點目標。

【如何使用呢？】

  EventUtil.addHandler(div,"touchstart",function(event){
    div.innerHTML=event.touches[0].clientX+','+event.touches[0].clientY;
  });
  EventUtil.addHandler(div,"touchmove",function(event){
    event.preventDefault();
    div.innerHTML=event.touches[0].clientX;
  });
  EventUtil.addHandler(div,"touchend",function(event){
    div.innerHTML=event.changedTouches[0].clientY;
  });

使用clientX……時，必須要指明具體的touch對象，而不要直接指明數組。

event.touches[0]

在touchend事件處理函數中，當該事件發生時，touches里面已經沒有任何的touch對象了，此時，就要使用changeTouches集合。

手勢事件

1. gesturestart：當一個手指已經按在屏幕上，而另一個手指又觸摸在屏幕時觸發。
2. gesturechange：當觸摸屏幕的任何一個手指的位置發生變化時觸發。
3. gestureend：當任何一個手指從屏幕上面移開時觸發。

【注意】只有兩個手指都觸摸到事件的接收容器時才觸發這些手勢事件。

觸摸事件與手勢事件之間的關系

1、當一個手指放在屏幕上時，會觸發touchstart事件，如果另一個手指又放在了屏幕上，則會觸發gesturestart事件，隨后觸發基于該手指的touchstart事件。

2、如果一個或兩個手指在屏幕上滑動，將會觸發gesturechange事件，但只要有一個手指移開，則會觸發gestureend事件，緊接著又會觸發toucheend事件。

手勢的專有屬性

1. rotation：表示手指變化引起的旋轉角度，負值表示逆時針，正值表示順時針，從零開始。
2. scale：表示兩個手指之間的距離情況，向內收縮會縮短距離，這個值從1開始，并隨距離拉大而增長。
   

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。