快捷導(dǎo)航

JS觸摸事件、手勢(shì)事件詳解

更新時(shí)間：2017年05月04日 09:38:12 作者：Miss____Du

本篇文章主要介紹了JS觸摸事件、手勢(shì)事件詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

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

dbclick

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

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

復(fù)制代碼代碼如下:

<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

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

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

mouse

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

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

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

觸摸事件

該類事件會(huì)在用戶手指放在屏幕上面時(shí)，在屏幕上滑動(dòng)時(shí)，或從屏幕上移開時(shí)觸發(fā)。具體來(lái)說(shuō)有以下幾個(gè)觸摸事件。
1、touchstart

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

2、touchmove

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

3、touchend

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

4、touchcancel

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

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

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

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

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

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

因?yàn)閠ouch事件是會(huì)冒泡的，所以利用這個(gè)屬性指出目標(biāo)對(duì)象。

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

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

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

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

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

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

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

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

target：觸摸的DOM節(jié)點(diǎn)目標(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……時(shí)，必須要指明具體的touch對(duì)象，而不要直接指明數(shù)組。

event.touches[0]

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

手勢(shì)事件