本文為大家分享了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);