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