本文為大家分享了JS觸摸與手勢(shì)事件，供大家參考，具體內(nèi)容如下

1.觸摸事件

包含 iOS 2.0 軟件的 iPhone 3G 發(fā)布時(shí)，也包含了一個(gè)新版本的 Safari 瀏覽器。這款新的移動(dòng) Safari提供了一些與觸摸（touch）操作相關(guān)的新事件。后來(lái)，Android 上的瀏覽器也實(shí)現(xiàn)了相同的事件。觸摸事件會(huì)在用戶手指放在屏幕上面時(shí)、在屏幕上滑動(dòng)時(shí)或從屏幕上移開(kāi)時(shí)觸發(fā)。具體來(lái)說(shuō)，有以下幾個(gè)觸摸事件。

touchstart ：當(dāng)手指觸摸屏幕時(shí)觸發(fā)；即使已經(jīng)有一個(gè)手指放在了屏幕上也會(huì)觸發(fā)。
touchmove ：當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)地觸發(fā)。在這個(gè)事件發(fā)生期間，調(diào)用 preventDefault()可以阻止?jié)L動(dòng)。
touchend ：當(dāng)手指從屏幕上移開(kāi)時(shí)觸發(fā)。
touchcancel ：當(dāng)系統(tǒng)停止跟蹤觸摸時(shí)觸發(fā)。關(guān)于此事件的確切觸發(fā)時(shí)間，文檔中沒(méi)有明確說(shuō)明。
以上的幾個(gè)事件都是會(huì)冒泡的，也都可以取消。雖然這些觸摸事件沒(méi)有在ＤＯＭ中定義，但讓他們卻是以兼容DOM的方式實(shí)現(xiàn)的。因此，每個(gè)觸摸事件的event對(duì)象都提供了在鼠標(biāo)事件中常見(jiàn)的屬性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey、metaKey。
除了常見(jiàn)的DOM屬性，觸摸事件還包含下列三個(gè)用于跟蹤觸摸的屬性。
touches ：表示當(dāng)前跟蹤的觸摸操作的 Touch 對(duì)象的數(shù)組。
targetTouchs ：特定于事件目標(biāo)的 Touch 對(duì)象的數(shù)組。
changeTouches ：表示自上次觸摸以來(lái)發(fā)生了什么改變的 Touch 對(duì)象的數(shù)組。

每個(gè)Touch 對(duì)象包含下列屬性。

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)。

使用這些屬性可以跟蹤用戶對(duì)屏幕的觸摸操作。來(lái)看下面的例子。

function handleTouchEvent(event){
//只跟蹤一次觸摸
if (event.touches.length == 1){
var output = document.getElementById("output");
switch(event.type){
case "touchstart":
output.innerHTML = "Touch started (" + event.touches[0].clientX +
"," + event.touches[0].clientY + ")";
break;
case "touchend":
output.innerHTML += "<br>Touch ended (" +
event.changedTouches[0].clientX + "," +
event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault(); //阻止?jié)L動(dòng)
output.innerHTML += "<br>Touch moved (" +
event.changedTouches[0].clientX + "," +
event.changedTouches[0].clientY + ")";
break;
}
}
}
EventUtil.addHandler(document, "touchstart", handleTouchEvent);
EventUtil.addHandler(document, "touchend", handleTouchEvent);
EventUtil.addHandler(document, "touchmove", handleTouchEvent);

以上代碼會(huì)跟蹤屏幕上發(fā)生的一次觸摸操作。為簡(jiǎn)單起見(jiàn)，只會(huì)在有一次活動(dòng)觸摸操作的情況下輸出信息。當(dāng) touchstart 事件發(fā)生時(shí)，會(huì)將觸摸的位置信息輸出到 <div> 元素中。當(dāng) touchmove 事件發(fā)生時(shí)，會(huì)取消其默認(rèn)行為，阻止?jié)L動(dòng)（觸摸移動(dòng)的默認(rèn)行為是滾動(dòng)頁(yè)面），然后輸出觸摸操作的變化信息。而 touchend 事件則會(huì)輸出有關(guān)觸摸操作的最終信息。注意，在 touchend 事件發(fā)生時(shí)， touches集合中就沒(méi)有任何 Touch 對(duì)象了，因?yàn)椴淮嬖诨顒?dòng)的觸摸操作；此時(shí)，就必須轉(zhuǎn)而使用 changeTouchs集合。

這些事件會(huì)在文檔的所有元素上面觸發(fā)，因而可以分別操作頁(yè)面的不同部分。在觸摸屏幕上的元素時(shí)，這些事件（包括鼠標(biāo)事件）發(fā)生的順序如下：
(1) touchstart
(2) mouseover
(3) mousemove （一次）
(4) mousedown
(5) mouseup
(6) click
(7) touchend
支持觸摸事件的瀏覽器包括 iOS 版 Safari、Android 版 WebKit、bada 版 Dolfin、OS6+中的 BlackBerryWebKit、Opera Mobile 10.1+和 LG 專(zhuān)有 OS 中的 Phantom瀏覽器。

2. 手勢(shì)事件

iOS 2.0 中的 Safari 還引入了一組手勢(shì)事件。當(dāng)兩個(gè)手指觸摸屏幕時(shí)就會(huì)產(chǎn)生手勢(shì)，手勢(shì)通常會(huì)改變顯示項(xiàng)的大小，或者旋轉(zhuǎn)顯示項(xiàng)。有三個(gè)手勢(shì)事件，分別介紹如下。

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

只有兩個(gè)手指都觸摸到事件的接收容器時(shí)才會(huì)觸發(fā)這些事件。在一個(gè)元素上設(shè)置事件處理程序，意味著兩個(gè)手指必須同時(shí)位于該元素的范圍之內(nèi)，才能觸發(fā)手勢(shì)事件（這個(gè)元素就是目標(biāo)）。由于這些事件冒泡，所以將事件處理程序放在文檔上也可以處理所有手勢(shì)事件。此時(shí)，事件的目標(biāo)就是兩個(gè)手指都位于其范圍內(nèi)的那個(gè)元素。

觸摸事件和手勢(shì)事件之間存在某種關(guān)系。當(dāng)一個(gè)手指放在屏幕上時(shí)，會(huì)觸發(fā) touchstart 事件。如果另一個(gè)手指又放在了屏幕上，則會(huì)先觸發(fā) gesturestart 事件，隨后觸發(fā)基于該手指的 touchstart事件。如果一個(gè)或兩個(gè)手指在屏幕上滑動(dòng)，將會(huì)觸發(fā) gesturechange 事件。但只要有一個(gè)手指移開(kāi)，就會(huì)觸發(fā) gestureend 事件，緊接著又會(huì)觸發(fā)基于該手指的 touchend 事件。
與觸摸事件一樣，每個(gè)手勢(shì)事件的 event 對(duì)象都包含著標(biāo)準(zhǔn)的鼠標(biāo)事件屬性： bubbles 、cancelable 、 view 、 clientX 、 clientY 、 screenX 、 screenY 、 detail 、 altKey 、 shiftKey 、ctrlKey 和 metaKey 。此外，還包含兩個(gè)額外的屬性： rotation 和 scale 。其中， rotation 屬性表示手指變化引起的旋轉(zhuǎn)角度，負(fù)值表示逆時(shí)針旋轉(zhuǎn)，正值表示順時(shí)針旋轉(zhuǎn)（該值從 0 開(kāi)始）。而 scale屬性表示兩個(gè)手指間距離的變化情況（例如向內(nèi)收縮會(huì)縮短距離）；這個(gè)值從 1 開(kāi)始，并隨距離拉大而增長(zhǎng)，隨距離縮短而減小。

下面是使用手勢(shì)事件的一個(gè)示例。

function handleGestureEvent(event){
var output = document.getElementById("output");
switch(event.type){
case "gesturestart":
output.innerHTML = "Gesture started (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
case "gestureend":
output.innerHTML += "<br>Gesture ended (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
case "gesturechange":
output.innerHTML += "<br>Gesture changed (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
}
}
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);

與前面演示觸摸事件的例子一樣，這里的代碼只是將每個(gè)事件都關(guān)聯(lián)到同一個(gè)函數(shù)中，然后通過(guò)該函數(shù)輸出每個(gè)事件的相關(guān)信息。

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

最新評(píng)論