原文：http://www.smashingmagazine.com/2015/03/20/better-browser-input-events/

前端代码，有大部分都在处理来自用户鼠标、键盘、触屏等设备的操作，这也是改善用户体验的重要部分。或许你已经听说了移动端设备点击存在300毫秒延迟和滚动时无法响应用户操作的问题，而文本主要还是针对点击事件相关的部分。

概述

目前，和用户点击相关的事件有touch events，mouse events，pointer events，keyboard events。

其中Pointer事件规范是微软发起的，现在已经是w3c规范的一部分。此规范的主要目的还是不再对触摸或者鼠标进行区分，希望通过一个统一的事件来解决不同设备的点击操作处理。不过至少到现在chrome和safari还没有打算实现此规范。

事件的触发顺序

一次用户的点击，对于浏览器来说，会触发一系列的事件，比如touchstart → touchend → mouseover → mousemove → mousedown → mouseup → click。

这个顺序还和浏览器的具体实现有关，比如Point事件规范提供了另外一个选项：mousemove → pointerover → mouseover → pointerdown → mousedown → gotpointercapture → pointerup → mouseup → lostpointercapture → pointerout → mouseout → focus → click。

下面的图片展示了操作对应的事件触发顺序：

1. 点击一个元素
2. 二次点击
3. 点击结束

（图片展示事件不包含blur和focus）。

ios的实现(Image: Stephen Davis) (View large version)

Android 4.4设备。(Image: Stephen Davis) (View large version)

IE 11。(Image: Stephen Davis) (View large version)

实践

通过了解事件触发顺序，我们可以开始考虑如何优化事件的处理。

300ms的延迟来自于浏览器对双击的等待，滚动的时候不执行脚本也是为了保证滚动时的体验。对于浏览器来说，这是最简单通用的方式，而对于开发者来说，是可以知道什么场景下不需要这些优化，比如300ms的延迟是可以通过一些设置来关闭的。

• 安卓webkit和chrome上设置<meta name="viewport" conten* t="width=device-width">。
• IE上可以通过css，-ms-touch-action: none解决。
• IOS比较悲催，以上两个方式都还未被webkit采用，#122212和 #133112。IOS8中采用了一个新的策略，停留时间小于~125ms的快速点击会存在300ms的触发延迟，而停留时间大于~125ms的点击将不当做双击事件，而不存在延时。FastClick对IOS8的这个特性做过特殊处理，当时的讨论。

这些处理的目的都是为了加快用户操作的响应。

而除了浏览器原生支持的方式之外，开发者也可以通过用更早响应的事件替代click来加快响应，比如touchend的时候，判断是一次点击，就可以直接触发click事件，从而实现响应加速，而不用等浏览器的click事件触发。

具体的做法可以参考FastClick， polymer-gestures或者Hammer.js。

总结

click事件原来是很简单的，但是在触屏时代到来之后，click本身的判断会变得越来越复杂。了解事件背后发生了什么，可以帮助我们了解如何优化对这些事件的处理。