js 判断手势_JS手势事件总结

不常用事件：手机旋转90度、倾斜等设置放置姿态变化的四大事件orientationchange事件、MozOrientation事件、deviceorientation事件、devicemotion事件。

常用事件：

iOS版 Safari为了向开发人员传达一些特殊信息，新增了一些专有事件。因为 iOS设备既没有鼠标 也没有键盘，所以在为移动 Safari开发交互性网页时，常规的鼠标和键盘事件根本不够用。随着 Android 中的 WebKit 的加入，很多这样的专有事件变成了事实标准，导致 W3C开始制定 Touch Events规范(参 见 https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html)。以下介绍的事件只针对触摸设备。

触摸事件包含 iOS 2.0软件的 iPhone 3G发布时，也包含了一个新版本的 Safari浏览器。这款新的移动 Safari 提供了一些与触摸(touch)操作相关的新事件。后来，Android上的浏览器也实现了相同的事件。触摸 事件会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。具体来说，有以下几个触 摸事件。

touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。

touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault() 可以阻止滚动。

touchend：当手指从屏幕上移开时触发。

touchcancel：当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。

上面这几个事件都会冒泡，也都可以取消。虽然这些触摸事件没有在 DOM规范中定义，但它们却 是以兼容 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 += "
Touch ended (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";

break;

case "touchmove":

event.preventDefault(); //prevent scrolling output.innerHTML += "
Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";

break;

}

}

}

document.addEventListener("touchstart", handleTouchEvent, false);

document.addEventListener("touchend", handleTouchEvent, false);

document.addEventListener("touchmove", handleTouchEvent, false);

以上代码会跟踪屏幕上发生的一次触摸操作。为简单起见，只会在有一次活动触摸操作的情况下输 出信息。当 touchstart 事件发生时，会将触摸的位置信息输出到

元素中。当 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+中的 BlackBerry WebKit、Opera Mobile 10.1+和 LG专有 OS中的 Phantom浏览器。目前只有 iOS版 Safari支持多点触摸。 桌面版 Firefox 6+和 Chrome也支持触摸事件。

触摸事件和手势事件之间存在某种关系。当一个手指放在屏幕上时，会触发 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 开始，并随距离拉大而 增长，随距离缩短而减小。 下面是使用手势事件的一个示例。