iOS版Safari为了向开发人员传达一些特殊信息,新增了一些专有事件。因为iOS设备既没有鼠标也没有键盘,所以在为移动Safari开发交互网页时,常规的鼠标和键盘事件根本不够用。随着Android中的WebKit的加入,很多这样的专有事件变成了事实标准。
触摸事件
包含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节点坐标。
使用这些属性可以跟踪用户对屏幕触摸操作。来看下面的例子。
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 += "<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);
与前面演示触摸事件的例子一样,这里的代码只是将每个事件都关联到同一个函数中,然后通过该函数输出每个事件的相关信息。
note:触摸事件也会返回rotation和scale属性,但这两个属性只会在两个手指与屏幕保持接触时才会发生变化。一般来说,使用基于两个手指的手势事件,要比管理触摸事件中的所有交互要容易的多。
扩展阅读:附件 -> handling Event
相关推荐
一个JavaScript库,用于支持触摸屏设备上的触摸(尤其是多点触摸)手势_JavaScript_下载.zip
Hammer.js:实现多点触摸手势的javascript库
用于同步触摸手势的javascript库_JavaScript_下载.zip
javascript开发移动端app网站-处理手机手势,手指触摸事件.zip
现代JavaScript触摸手势库。 该库允许开发人员配置预先存在的手势,以及使用ZingTouch的生命周期创建自己的手势。 快速链接 目录 概述 ZingTouch的构建旨在根据需要使浏览器的手势实现变得简单或复杂。 ZingTouch...
interact.js实现JavaScript拖放,调整大小和多点触摸惯性和捕捉手势
现代的JavaScript触摸手势库。允许开发人员配置预先存在的手势,甚至使用ZingTouch的生命周期中创建自己的。
用于在Ember应用程序中构建和使用触摸手势的轻量级库_JavaScript_下载.zip
组件绑定鼠标触摸手势的小助手
GNOME Shell X11Gestures扩展程序通过此扩展程序在X11上启用GNOME Shell多点触摸手势。 必须单独安装Touchégg,然后再安装。GNOME Shell X11Gestures扩展使用此扩展在X11上启用GNOME Shell多点触摸手势。 Touché...
gnome外壳扩展手势为GNOME桌面提供扩展的触摸板手势功能和配置。背景通过默认,GNOME使用libinput来检测用户执行的触摸板手势。 但是,它仍然是新鲜的,开箱即用且唯一可以检测到并执行的手势是四根手指垂直滑动。 ...
touch轻量级移动端触摸手势库,压缩之后4kb.回调函数的参数回调函数里面的参数event包含4个属性:pagex,pageY,clientX,clientY,screenX,screenY,direction,displacementX,displacementY.screenX事件发生时手指触摸位置...
《HTML5触摸界面设计与开发》专注于触摸界面的开发,内容的结构和优化网站的思路大概一致。上半部分涵盖了能使各类网站,特别是移动网站变快的基本概念。第2章和第3章告诉你如何创建一个简单的网站,并能快速加载。...
Touchy是一个jQuery插件,用于管理与W3C兼容的浏览器(例如Mobile Safari或Android浏览器)或任何支持ontouchstart,ontouchmove和ontouchend事件的浏览器上的触摸事件。 它创建了程序员可以在更高级别使用的新...
每个手势都可以在添加和删除触摸点时无缝运行,而对触摸点的数量没有限制,并且每个触摸点都可以构成手势。 请访问此页面以获取运行中的系统的示例: 。 该库无需使用任何依赖关系即可实现其目标,除了其自身的...
jQuery-photoClip是一款支持移动设备触摸手势的jQuery图片裁剪插件。该图片裁剪插件在移动设备上可以使用手指来进行各种操作,如缩放、旋转等,同时在桌面设备中也提供了相应的方法来操作,是一款非常不错的图片裁剪...
Q.jsQ.js适用于移动端web开发,和目前主流的js框架比,主要的优势是轻量级,为移动开发而生,完美的touch事件支持。Q.js的插件扩展是以对象字面量的形式扩展插件,框架的开发思路是基于框架的核心方法以外部模块的...
一种react组件,可让您使用移动设备上的多点触摸手势以及桌面设备上的鼠标事件\滚轮来缩放和拖动任何DOM元素。 基于此模块, 组件功能: :crystal_ball: 简单的。 易于使用; :red_apple: 它适用于移动触摸手势和...