月度归档:2014年02月

移动端点击事件触发顺序

移动端页面事件触发顺序和事件触发规则不同于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左右。