你的位置:首页 > 网页设计

[网页设计]移动端触屏网页的触摸事件


PC端网页从无到有发展至今,人们习惯了鼠标与键盘的人机交互模式,因此在PC端网页开发中一般使用鼠标事件和键盘事件。

mouse事件:

onclick事件:在单击鼠标左键或右键时发生。

ondoubleclick事件:在双击鼠标左键时发生。

onmousedown事件在单击鼠标按钮(左键、右键或中键)并且尚未松开时发生。

onmousemove事件:在鼠标光标移动时发生。

onmouseup事件:在松开鼠标按钮(左键、右键或中键)时发生。

onmouseover事件:在鼠标光标移动到对象上时发生。

onmouseout事件:在鼠标光标离开对象时发生。

ommousewheel事件:在移动鼠标滚轮时发生。

keyboard事件:

onkeypress事件:按下并释放某个键进时发生。

onkeydown事件:按键后(释放该键之前)发生。

onkeyup事件:释放某键时发生。

随着科技的发展,触屏设备越来越多,触屏设备的人机交互模式(包含多点触控技术)有点击、双击、拖拽、轻划、缩小、放大、按压、双指点击、按住拖拽、旋转等详见移动交互小白的学习笔记——手势篇。 现在,触摸、传统鼠标、键盘三种交互模式并存。Web开发人员需要确保网站适应这三种交互模式。

今天这里只介绍几种普及得比较好的触摸事件,你可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备哦):

touchstart:在用户的手指触摸屏幕的瞬间触发。

touchmove:在用户移动手指的过程中连续触发。

touchend:用户的手指离开屏幕的瞬间触发

touchcancel:其含义取决于浏览器。

touchcancel

我承认我不太明白touchcancel事件。touchcancel在触摸序列被取消时触发。但是这意味着什么完全取决于浏览器的实现:Chrome浏览器在用户的手指离开屏幕的瞬间触发touchcancel事件,但其他大多数浏览器则没有。幸运的是,我还没有发现必须使用touchcancel的情景。貌似其他脚本和库也几乎没有使用 touchcancel。有些代码为了安全起见,把它等同于touchend。

而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):

touches:当前位于屏幕上的所有手指的列表。

targetTouches:位于当前DOM元素上手指的列表。

changedTouches:涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息(常用):

identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)

target:DOM元素,是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。 

radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。

 

等价事件

目前这两种交互模式都有自己的一套事件,但这并不意味着它们是完全无关且不同的。事实上,某些事件是等价的。下面的表格给出了这方面的情况。

很显然,触摸动作序列:touchstart-touchmove-touchend和鼠标序 列:mousedown-mousemove-mouseup以及键盘序列:keydown-keypress-keyup很相似,这并不是巧合,因为这 三种交互模式都可以描述为start-move-stop。但是,有时候两个操作模式很像,但第三个却不。比如在下拉菜单的例子里,鼠标和键盘很像,而触摸不同。在拖放实例中,鼠标和触摸几乎一致,但键盘非常不同。在滚动层的例子里,这三种操作模式完全不同。最后是mouseover和mouseout的问题。focus和blur是它们的键盘模式的等价事件,但是触摸模式没有这样的等价事件。就像我们在“CSS”一章看到的,在触摸屏设备中不存在“悬停”。

触摸事件的不同之处

可以看出,等价事件确实存在,这取决于上下文。但是触摸、按键和鼠标事件并不完全相同。当鼠标指针移入某个元素,或者用户按下某个鼠标按键时,系统可以立即判断出应该触发哪个事件。而对于 触摸操作来说就不同了,触摸操作可以引出不同的动作:在你的手指触碰屏幕的瞬间,系统还无法判断出你的意图。你只是想轻触(Tap)某个元素?还是想滚动 某个可滚动元素?亦或是想缩放?还是想双触(Double-Tap)?浏览器必须等待一定时间间隔才能做出判断。这个时间间隔并不是非常短,而是一个可察 觉的间隔。

能否合并触摸事件与鼠标事件

我们发现,通常情况下鼠标事件和触摸事件非常相似,但是二者还是有一些本质区别的。有了这个认识,我们就可以更好地理解微软的指针事件,以及为什么会提出指针事件。微软认为没有必要分出鼠标、触摸两种事件。不管是鼠标指针、手指(触摸)还是触控笔(也叫定位笔),统称为指针,只要通过这些指针改变了些什么,就触发指针事件。所以,下面是微软版本的等价事件

现在我们有了两种事件分类方式:鼠标、触摸分离的苹果版本;鼠标、触摸整合的微软版本。到目前为止, 只有IE支持微软的版本。其他浏览器都支持苹果版本。又如我们在前面看到的,Mozilla和Google正在考虑实现指针事件 (PointerEvent)。所以未来情况可能还会发生变化。

本文参考 移动Web之触摸和指针事件详解