zepto tap事件的一个bug

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

 

BUG情况说明：

给页面<a>标签绑定了tap事件，在移动设备上点击按钮貌似一切正常，可以正常响应。

但是，把页面上下滑动几次之后，或者在滑动时手指滑动出移动屏幕之外，之后再点击按钮，就会发现第一次点击的时候事件没被触发，需要点击第二次才会正常，而且几乎是必现的。一开始的时候我还以为是安卓Webview要获取页面焦点的原因，后来研究了下zepto源码之后，发现原来不是。

 

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事件不被触发。

 

问题解决：

想必大家都知道该怎么解决，没错，就是在touchstart时添加deltaX和deltaY的置0，代码如下：

 

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

 

 

 

附：zepto在线生成器 

 

================

推荐阅读：

【冷知识学习网】

【老司机支招，掌握这几个常用的路面标志，保证不被扣分】