JavaScript抚摸与手势事件

JavaScript触摸与手势事件
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.changeTouches[0].clientY + ")"; break; case "touchmove": event.preventDefault(); //阻止滚动 output.innerHTML += "<br>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事件发生时，会取消其默认行为，阻止滚动（触摸移动的默认行为是滚动页面），然后输出触摸操作的变化信息。而touched事件则会输出有关触摸操作的最终信息。注意，在touched事件发生时，touched集合中就没有任何Touch对象了，因为不存在活动的触摸操作;此时，就必须转而使用changeTouchs集合。

?????? 这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分。在触摸屏幕上的元素时，这些事件发生的数序如下：

touchstart
mouseover
mousemove
mousedown
mouseup
click
touchend

?????? 支持触摸事件的浏览器包括iOS版Safari、Android版WebKit、beta版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1和LG专有OS中的phantom浏览器。目前只有IOS版Safari支持多点触屏。桌面版Firefox 6+和Chrome也支持触摸事件。

手势事件

?????? IOS 2.0中的Safari还引入了一组手势事件。当两个手指触摸屏幕时就会产生手势，手势通常会改变显示项的大小，或者旋转显示项。有三个手势事件，分别如下。

gesturestart:当一个手指已经按在屏幕上面另一个手指有触摸屏幕时触发。gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。gestureend:当任何一个手指从屏幕上面移开时触发。

?????? 只有两个手指都触摸到事件的接收容器时才会触发这些事件。在一个元素上设置事件处理程序，意味着两个手指必须同时位于该元素的范围之内，才能触发手势事件（这个元素就是目标）。由于这些事件冒泡，所以将事件处理程序放在文档上也可以处理所有手势事件。此时，事件的目标就是两个手指都位于其范围内的那个元素。

?????? 触摸事件和手势事件之间存在某种关系。当一个手指放在屏幕上时，会触发touchstart事件。如果另一个手指又放在了屏幕上，则会先触发gesturestart事件。如果另一个手指又放在了屏幕上，则会先触发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.ratation +",scale=" + event.scale + ")";            break;        case "gestureend":            output.innerHTML += "&lt;br&gt;Gesture ended (rotation+" + event.rotation + ",scale=" + event.scale + ")";            break;        case "gesturechange":            output.innerHTML += "&lt;br&gt;Gesture changed (rotation+=" + event.rotation + ",scale+" + event.scale + ")";            break;    }}document.addEventListener("gesturestart", handleGestureEvent, false);document.addEventListener("gestureend", handleGestureEvent, false);document.addEventListener("gesturechange", handleGestureEvent, false);

?????? 与前面演示触摸事件的例子一样，这里的代码只是将每个事件都关联到同一个函数中，然后通过该函数输出每个事件的相关信息。

note:触摸事件也会返回rotation和scale属性，但这两个属性只会在两个手指与屏幕保持接触时才会发生变化。一般来说，使用基于两个手指的手势事件，要比管理触摸事件中的所有交互要容易的多。

阅读原文

扩展阅读：附件 -> handling Event

JavaScript抚摸与手势事件

热点推荐