移动端页面事件触发顺序和事件触发规则不同于PC端，一般都知道click在移动端会延迟200~300ms触发。
本文从实例出发，演示移动端事件的触发规则和顺序。
HTML页面：
<body>
<script type="text/javascript">
var firstEmitTime = 0;
//页面输出日志
function showLog(msg){
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
</script>
<a href="javascript:var aa='href:' + ((new Date()).getTime() - firstEmitTime);showLog(aa);console.log(aa);" id="aa">This is a href</a>
<script type="text/javascript" src="tmp.js"></script>
</body>
//tmp.js：
var aa = document.getElementById("aa");
var eventTypeArr = ['click','touchstart','touchmove','touchend','mousedown','mousemove','mouseover','mouseup'];
for(var i = 0; i < eventTypeArr.length; i++){
//利用闭包保存eventType，当回调函数触发时会访问该闭包的环境变量对象
(function(){
var eventType = eventTypeArr[i];
aa.addEventListener(eventType,function(){
var curTime = (new Date()).getTime();
if(firstEmitTime === 0){
firstEmitTime = curTime;
}
//打印当前事件触发时间与第一个事件触发时间的差值
var log = eventType + ':' + (curTime - firstEmitTime);
console.log(log);
showLog(log);
});
})();
}
在iPhone4/iOS7.0.4上如果点击（非长按），则输出结果大多为（事件触发顺序不变，间隔时间略有不同）：
touchstart:0
touchend:204
mouseover:243
mousemove:243
如果长按链接，经一百多次测试，下面是两种输出结果，约70%是第一种情况（由于受点击时长和力度的影响，此数据仅供参考）：
第一种：
touchstart:0
mouseover:2238
mousedown:2239
mouseup:2243
click:2244
href:2245
第二种：
mouseover:0
mousedown:0
mouseup:5
click:5
href:5
其中，href内为JavaScript代码时，浏览器会提示是否打开，需要点击打开，才会输出mouseover及其后面的值，因此与touchstart的间隔可能不是200~300ms。
从结果可以看出该环境下：
1、与click触发时，touchstart未必触发；
2、mouse系列事件与click事件是相近时间内触发，大约在touchstart后延迟200~300ms后触发。
在华为MT1-U06/Android4.1.2上点击链接（非长按），测试一百多次，主要有下面三种结果，出现概率分别为70%、25%和5%（由于受点击时长和力度的影响，此数据仅供参考）：
第一种：
mouseover:0
mousemove:6
touchstart:12
touchend:568
mousedown:869
mouseup:874
click:876
href:879
第二种：
mouseover:0
mousemove:7
mousedown:387
mouseup:392
click:394
href:396
第三种：
mouseover:0
mousemove:8
touchstart:12
touchmove:91
touchend:95
可以看出该环境下：
1、mouse事件会先于touch事件开始，而迟于其结束。
2、click和href事件触发仍是最后触发，会延迟300ms左右。
1885
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
