手持设备点击响应速度，鼠标事件与touch事件的那些事

前言

现在一直在做移动端的开发，这次将单页应用的网页内嵌入了app，于是老大反映了一个问题：
app应用点击响应慢！
我开始不以为然，于是拿着网页版的试了试，好像确实有一定延迟，于是开始了研究，最后选择了touch取代鼠标事件

但是，touch事件取代mouse事件，还是有一定问题的，据说网上问题很多，因为两者之间还是有一定差异
而且如果完全使用touch事件，对自动化测试的同事来说，他们的系统根本不支持touch事件，再者我们平时网页开发也不方便
所以，了解鼠标事件与touch事件的区别，探讨鼠标事件与touch事件的兼容也是有必要的，于是我们开始今天的学习吧
PS：这里使用zepto框架，懒得自己搞了......

事件差异

鼠标事件

首先，我们来看看鼠标事件相关吧：

 1 var startTime;
 2 var log = function (msg) {
 3     console.log(new Date().getTime() - startTime);
 4     console.log(msg);
 5 };
 6 var mouseDown = function () {
 7     startTime = new Date().getTime();
 8     log('mouseDown');
 9 };
10 var mouseClick = function () {
11     log('mouseClick');
12 };
13 var mouseUp = function () {
14     log('mouseUp');
15 };
16  
17 document.addEventListener('mousedown', mouseDown);
18 document.addEventListener('click', mouseClick);
19 document.addEventListener('mouseup', mouseUp);

从这里看到了，鼠标顺序是有mousedown -> click -> mouseup 的顺序，其时间差也出来了

touch事件

然后我们看看touch事件

没有click

touch包含三个事件，touchstart、touchmove、touchend，并没有click事件，所以click事件需要自己模拟，这个我们后面来看看

 1 var startTime;
 2 var log = function (msg) {
 3     console.log(new Date().getTime() - startTime);
 4     console.log(msg);
 5 };
 6 var touchStart = function () {
 7     startTime = new Date().getTime();
 8     log('touchStart');
 9 };
10 
11 var touchEnd = function () {
12     log('touchEnd');
13 };
14 
15 document.addEventListener('touchstart', touchStart);
16 document.addEventListener('touchend', touchEnd);

在chrome开启touch事件的情况下，可以看到这个结果

混合事件

现在我们在手机上同时触发两者事件看看区别，这里代码做一定修改

按 Ctrl+C 复制代码

按 Ctrl+C 复制代码

测试地址

http://sandbox.runjs.cn/show/ey54cgqf

此处手机与电脑有非常大的区别！！！

结论

不要同时给document绑定鼠标与touch事件

document.addEventListener('mousedown', mouseDown);
document.addEventListener('click', mouseClick);
document.addEventListener('mouseup', mouseUp);
document.addEventListener('touchstart', touchStart);
document.addEventListener('touchend', touchEnd);

这个样子，在手机上不会触发click事件，click事件要绑定到具体元素

PS：此处的原因我就不去研究了，如果您知道为什么，请留言

手机上mousedown本来响应就慢

经过测试，电脑上touch与click事件的差距不大，但是手机上，当我们手触碰屏幕时，要过300ms左右才会触发mousedown事件

所以click事件在手机上响应就是慢一拍

数据说明