问题描述:给页面<a>标签绑定了tap事件,在移动设备上点击按钮貌似一切正常,可以响应。但是,把页面上下滑动几次之后,或者在滑动时手指滑动出移动屏幕之外,之后再点击按钮,就会发现第一次点击的时候事件没被触发,需要点击第二次才会正常,而且几乎是必现的。
问题分析:tap事件是用touchstart,touchmove,touchend这三个事件去实现的。但是为了区分【点击】和【拖动】两个动作,zepto用了deltaX和deltaY两个变量去分别记录手指在触碰到屏幕时到离开屏幕时的x轴和y轴距离,如果deltaX>30px或者deltaY>30px,则认为是【拖动】,就不会触发tap事件了。一切看似正常,但是细看一下,原来deltaX和deltaY的置0是在touchend里实现的!而移动设备上,有两种情况导致touchend事件没被触发。
1、快速划动屏幕多次;
2、手指划出屏幕边界。
这样deltaX和deltaY就不会被置0了,等到下次再点击的时候,deltaX和deltaY就有可能大于30px,导致tap事件不被触发。
解决方案:修改zepto代码,在touchstart时添加deltaX和deltaY的置0。
.on('touchstart MSPointerDown pointerdown', function(e){
deltaX = deltaY = 0;