移动设备的大部分交互都是通过触摸touch来实现的,是因为移动设备通常会有一个电容式触摸屏(capacitive touch-sensitive screen),以捕捉用户的手指所做的交互。对于触屏的交互式网站、游戏,触摸事件是相当重要的。Apple在IOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。
简单介绍一下IOS上的浏览器(主要Safari)所支持的多触式事件模型,然后将触控(Touch)这种简单的动作升级为手势(Gestrue)。
IOS上的Safari也支持click 和mouseover等传统的交互事件,只是不推荐在iOS的浏览器应用上使用click和mouseover,因为这两个事件是为了支持鼠标点击而设计出来的。Click事件在IOS上会有半秒左右的延迟,原因是IOS要highlight接收到click的element。而mouseover/out等事件则会被手指的点击触发。所以,在IOS上,应当抛弃传统的交互事件模型而接受一个新的事件模型。Touch事件和更高级 的Gesture事件,能让你的网页交互起来像native应用一样。
Touch事件是在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。
Gesture事件则是对touch事件的更高级的封装,主要处理手指slide、rotate、scale等动作。
1、跨移动设备(触屏)常用touch处理事件:
touchstart:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。 touchmove:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。 touchend:当手指从屏幕上拿起的时候触发。 touchcancel:当系统停止(取消)跟踪touch触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明(不详)。
上面的这些事件都会冒泡,也都可以取消。虽然这些触摸事件没有在DOM规范中定义,但是它们却是以兼容DOM的方式实现的。所以,每个触摸事件的event对象都提供了在鼠标实践中常见的属性:bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)等。
2、每个触摸事件都包括了三个触摸列表(即用于跟踪触摸的属性),每个列表里包含了对应的一系列触摸点(用来实现多点触控):
touches:当前位于屏幕上的所有手指的一个列表(表示当前跟踪的触摸操作的touch对象的数组) targetTouches:位于当前DOM元素上的手指的一个列表(特定于事件目标的Touch对象的数组) changeTouches:涉及当前事件的手指的一个列表(表示自上次触摸以来发生了什么改变的Touch对象的数组)
3、每个触摸点由包含了如下触摸信息(常用重要属性):
通过touch event handler的event对象取到(一般是通过event.changedTouches属性)。 --- pageX/pageY/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离>相对页面,client不包含滚动距离>相对视口>>触摸点相对于浏览器窗口viewport的位置 ,screen以屏幕为基准>相对屏幕)。 --- target:触目的DOM节点目标。(DOM元素,是动作所针对的目标) --- identifier:标识触摸的唯一ID。(唯一标识触摸会话(touch session)中的当前手指) --- radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。(未测试)
最后,来看下几个例子:
demo1:
demo2:
demo3:
转自:
html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove
WEB前端开发(www.css119.com)–移动互联网终端的touch事件,touchstart, touchend, touchmove