Zepto tap事件中需要触发两次的问题

最近在使用zepto.js的时候,发现其tap事件的一个BUG,被产品和测试同学反复找了几次之后,终于下定决定去研究zepto的源码,并解决了问题。

BUG情况说明:

给页面<a>标签绑定了tap事件,在移动设备上点击按钮貌似一切正常,可以正常响应。
但是,把页面上下滑动几次之后,或者在滑动时手指滑动出移动屏幕之外,之后再点击按钮,就会发现第一次点击的时候事件没被触发,需要点击第二次才会正常,而且几乎是必现的。一开始的时候我还以为是安卓Webview要获取页面焦点的原因,后来研究了下zepto源码之后,发现原来不是。

Tap事件实现原理:

其实不用看代码都猜的出来,是用touchstart touchmove touchend这三个事件去实现的,没错,就是这样。

但是为了区分“点击”和“拖动”两个动作,zepto是用了deltaXdeltaY两个变量去分别记录手指在触碰到屏幕时到离开屏幕时的x轴和y轴距离,如果deltaX>30px或者deltaY>30px,则认为是“拖动”动作,就不会触发tap事件了。

一切看似正常,但是细看一下,原来deltaXdeltaY的置0的是在touchend里实现的,而移动设备上,有两种情况是有可能导致touchend事件没触发(1.快速划动屏幕多次,2.划动屏幕时手指划出屏幕边界),这样deltaXdeltaY就不会被置0了,等到下次再点击的时候,deltaXdeltaY就有可能大于30px,导致tap事件不被触发。

问题解决:

想必大家都知道该怎么解决,没错,就是在touchstart时添加deltaXdeltaY的置0,代码如下:

.on('touchstart MSPointerDown pointerdown', function(e){  
    deltaX = deltaY = 0;  
    ...... 

修改位置:zepto里或者touch.js里修改。

猜你喜欢

转载自blog.csdn.net/github_38383183/article/details/73470005