觸屏已經(jīng)是我們身邊電子設(shè)備的常態(tài)了。觸摸事件當(dāng)然也是隨著觸屏的出現(xiàn)，用戶使用最多的事件啦！
難道使用觸屏事件后，其他原來的鼠標(biāo)事件就都不能用啦？當(dāng)然不是，只不過不是那么好用啊。

針對鼠標(biāo)事件，有哪些不適應(yīng)？

dbclick

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

可以通過在head標(biāo)簽內(nèi)加上這么一行：

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

關(guān)于meta標(biāo)簽，我還沒有研究過，罪過啊。

mouse

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

同時也會觸發(fā)mouseover與mouseout，測試結(jié)果，我發(fā)現(xiàn)，只有當(dāng)頁面第一次刷新時，單擊元素，參會觸發(fā)mouseover事件。

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

觸摸事件

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

當(dāng)手指放在屏幕上觸發(fā)。

2、touchmove

當(dāng)手指在屏幕上滑動時，連續(xù)地觸發(fā)。

3、touchend

當(dāng)手指從屏幕上離開時觸發(fā)。

4、touchcancel

當(dāng)系統(tǒng)停止跟蹤時觸發(fā)，系統(tǒng)什么時候取消，文檔沒有明確的說明。

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

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

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

當(dāng)一個手指在觸屏上時，event.touches.length=1,

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

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

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

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

clientY：觸摸目標(biāo)在視口中的y坐標(biāo)。

identifier：標(biāo)識觸摸的唯一ID。

pageX：觸摸目標(biāo)在頁面中的x坐標(biāo)。

pageY：觸摸目標(biāo)在頁面中的y坐標(biāo)。

screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。

screenY：觸摸目標(biāo)在屏幕中的y坐標(biāo)。

target：觸摸的DOM節(jié)點目標(biāo)。

【如何使用呢？】

  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對象，而不要直接指明數(shù)組。

event.touches[0]

在touchend事件處理函數(shù)中，當(dāng)該事件發(fā)生時，touches里面已經(jīng)沒有任何的touch對象了，此時，就要使用changeTouches集合。

手勢事件

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

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

觸摸事件與手勢事件之間的關(guān)系

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

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

手勢的專有屬性

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論