移动端触屏网页的触摸事件

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之触摸和指针事件详解