Mobile-click (click) event Latency problem generation and resolution

http://blog.csdn.net/xjun0812/article/details/64919063

The discovery of the problem

When you work on a project, you run into a mobile project, which has a small game that is equivalent to a pie in the sky and the user needs to click on the pie to get it. After the game is done in the PC-side test is no problem, Android phone test is no problem, but some Apple phones have a problem, users click on the pie did not respond.

Later, when I was debugging, I let the Pies rest on the screen, and the iphone users could click. Only to find that because the Click event delay causes the moving object not to be clicked by the user, after a certain period of delay, the object has been moved to another place.

Mobile page for click events there will be a 300-millisecond delay, that is, the JS capture Click event callback function processing, requires 300ms to take effect, causing most users to feel the mobile device HTML-based Web application interface slow response, and sometimes affect the processing of some business logic.

Why is there a delay?

The Google developer documentation mentions:

Mobile browsers'll wait approximately 300ms from the time that you tap the button to the Click event. The reason for it is, the browser is, waiting to see if you are actually performing a double tap.

Why does the mobile browser set a wait time of 300 milliseconds? This is related to the scheme of double-click scaling. Usually we may have noticed, double-click the zoom, that is, with your finger on the screen two times a quick click, you can see the content or image magnification, double-click again, the browser will zoom the page to the original scale.

When the browser captures the first click, it waits for a period of time, and if the user does not make the next click in the interval, the browser does the processing of the Click event. If the user makes a second click during this time, the browser does a double-click event Processing. This period is the 300 millisecond delay mentioned above.

How to avoid delays

In certain scenes such as some game pages, we need to cancel the delay of 300 hairs. There are currently the following methods:

Method One: Still scale

[HTML]View PlainCopy

1. <Meta name="viewport" content= "width=device-width user-scalable= ' no '">

Using this method must completely disable scaling to achieve the goal, although most mobile can solve the delay problem, but some of the iphone still does not work.

Method Two: Fastclick.js

Fastclick is a lightweight library developed by FT Labs specifically to address the 300 millisecond Click Latency issue for mobile browsers. In short, when the Touchend event is detected, Fastclick immediately triggers a simulated click event via DOM custom events and blocks the browser from the Click event that was actually triggered after 300 milliseconds. Use the following method.

First step: Introduce the Fastclick.js file in the page.

Step Two: Add the following code to the JS file
After the window load event, the body is raised with Fastclick.attach ().

[JavaScript]View PlainCopy

1. Window.addeventlistener (function () {
2. Fastclick.attach (document.body);
3. },false);

If your project uses jquery, rewrite the code above to:

[JavaScript]View PlainCopy

1. $ (function () {
2. Fastclick.attach (document.body);
3. });

Method Three: Pointer events

The pointer event was originally proposed by Microsoft and has now entered the candidate Recommendation Standard phase (candidate recommendation). Pointer events are a new series of Web events that are designed to use a single event model that unifies all input types, including the mouse (mouse), Touch, Touch (stylus), and so on.

Pointer events (Pointer events) are currently not well-compatible and do not know if they will be more supportive in the future.

Mobile-click (click) event Latency problem generation and resolution