触摸与手势事件

比眉伴天荒 2021-09-12 06:46 458阅读 0赞

iOS版Safari为了向开发人员传达一些特殊信息，新增了一些专有事件。因为iOS设备既没有鼠标也没有键盘，所以在为移动Safari开发交互网页时，常规的鼠标和键盘事件根本不够用。随着Android中的WebKit的加入，很多这样的专有事件变成了事实标准。

## 1.触摸事件 ##

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

*  touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
 *  touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。
 *  touchend:当手指从屏幕上移开时触发。
 *  touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。

上面这几个事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件的event对象都提供了在鼠标事件中常见的属性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。

除了常见的DOM属性外，触摸事件还包含下列三个用于跟踪触摸的属性。

*  touches:表示当前跟踪的触摸操作的Touch对象的数组。
 *  targetTouches:特定于事件目标的Touch对象的数组。
 *  changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含下列属性。

*  clientX:触摸目标在视口中的X坐标。
 *  clientY:触摸目标在视口中的Y坐标。
 *  identifier：表示触摸的唯一ID。
 *  pageX：触摸目标在页面中的x坐标。
 *  pageY：触摸目标在页面中的y坐标。
 *  screenX:触摸目标在屏幕中的x坐标。
 *  screenY:触摸目标在屏幕中的y坐标。
 *  target:触摸的DOM节点坐标。

使用这些属性可以跟踪用户对屏幕触摸操作。来看下面的例子。

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

元素中。当touchmove事件发生时，会取消其默认行为，阻止滚动（触摸移动的默认行为是滚动页面），然后输出触摸操作的变化信息。而touched事件则会输出有关触摸操作的最终信息。注意，在touched事件发生时，touched集合中就没有任何Touch对象了，因为不存在活动的触摸操作;此时，就必须转而使用changeTouchs集合。

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

1.  touchstart
2.  mouseover
3.  mousemove
4.  mousedown
5.  mouseup
6.  click
7.  touchend

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

## 2.手势事件 ##

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 += "<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);

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

> 触摸事件也会返回rotation和scale属性，但这两个属性只会在两个手指与屏幕保持接触时才会发生变化。一般来说，使用基于两个手指的手势事件，要比管理触摸事件中的所有交互要容易的多。
> 
>   
> 
> 
>   
> 
> 
> 转载地址：https://www.w3cmm.com/javascript/touch.html