A bug in the Zepto tap event

Recently in the use of zepto.js, found a bug in its Tap event, the product and test students repeatedly searched after several times, finally decided to study the source of Zepto, and solve the problem.

Bug Case Description:

A tap event is bound to a page <a> tag, and clicking on a button on a mobile device looks normal and can respond normally.

However, after you swipe the page a few times, or swipe out of the mobile screen while sliding, and then click the button, you will find that the first click of the event is not triggered, you need to click the second time will be normal, and almost must be present. At first I thought it was Android WebView to get the page focus, and later studied the next Zepto source, found that it is not.

Tap Event Implementation principle:

In fact, do not look at the code to guess, is to use Touchstart Touchmove touchend These three events to achieve, yes, that's it.

However, in order to differentiate between "click" and "drag" two actions, Zepto is using DeltaX and DeltaY two variables to record the x-axis and y-axis distance of the finger when touching the screen to the left screen, if deltax>30px or deltay>30px, is considered a "drag" action, the tap event is not triggered.

Everything seems normal, but a closer look at the original DeltaX and DeltaY 0 is implemented in Touchend, and mobile devices, There are two situations where it is possible to cause the Touchend event to not be triggered (1. Quickly swipe the screen several times, 2. The screen edge of the finger when the screen is sprouting), so that DeltaX and DeltaY will not be set 0, until the next click, DeltaX and DeltaY may be greater than 30px, resulting in tap events not to be touched Hair

Problem Solving:

Presumably we all know how to solve, yes, is to add deltax and DeltaY in the Touchstart 0, the code is as follows: [JavaScript] view plain copy. On (' Touchstart       Mspointerdown Pointerdown ', function (e) {deltax = DeltaY = 0; ......

Zepto in the change