识别拖动与点击操作之zepto的bug

Posted 2020-09-30

问题描述：给页面<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;