JS触摸与手势事件详解

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

以上代码会跟踪屏幕上发生的一次触摸操作。为简单起见,只会在有一次活动触摸操作的情况下输出信息。当 touchstart 事件发生时,会将触摸的位置信息输出到 <div> 元素中。当 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+中的 BlackBerryWebKit、Opera Mobile 10.1+和 LG 专有 OS 中的 Phantom浏览器。

2. 手势事件

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

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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wysszj.html