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

1.觸摸事件

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

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

每個Touch 對象包含下列屬性。

clientX ：觸摸目標在視口中的 x 坐標。
clientY ：觸摸目標在視口中的 y 坐標。
identifier ：標識觸摸的唯一 ID。
pageX ：觸摸目標在頁面中的 x 坐標。
pageY ：觸摸目標在頁面中的 y 坐標。
screenX ：觸摸目標在屏幕中的 x 坐標。
screenY ：觸摸目標在屏幕中的 y 坐標。
target ：觸摸的 DOM 節(jié)點目標。

使用這些屬性可以跟蹤用戶對屏幕的觸摸操作。來看下面的例子。

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動
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);

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

這些事件會在文檔的所有元素上面觸發(fā)，因而可以分別操作頁面的不同部分。在觸摸屏幕上的元素時，這些事件（包括鼠標事件）發(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 專有 OS 中的 Phantom瀏覽器。

2. 手勢事件

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

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

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

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

下面是使用手勢事件的一個示例。

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

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

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

最新評論