JS中觸摸與手勢事件的示例分析

這篇文章給大家分享的是有關JS中觸摸與手勢事件的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

具體內容如下

1.觸摸事件

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

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

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

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

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

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(); //阻止滾動
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);

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

這些事件會在文檔的所有元素上面觸發，因而可以分別操作頁面的不同部分。在觸摸屏幕上的元素時，這些事件（包括鼠標事件）發生的順序如下：
(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 還引入了一組手勢事件。當兩個手指觸摸屏幕時就會產生手勢，手勢通常會改變顯示項的大小，或者旋轉顯示項。有三個手勢事件，分別介紹如下。

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

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

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

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

感謝各位的閱讀！關于“JS中觸摸與手勢事件的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！