A bug in the Zepto tap event

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.