Mobile-end delay of 300ms causes and solutions
I. Introduction
End mobile browsers offers a special feature: Double-click (double tap) scaling.
Second, the moving-end delay of 300ms reasons
Why use a touch event? Touch event is unique to the mobile terminal browser html5 event.
Because the mobile terminal click great delay (approximately 300ms), 300ms delay judgment from the double-click and long press , because only the default expiration of the waiting period to determine when there is no follow-up action takes place, it will trigger a click event. The delay of the touch event is very short, the use of the touch event can increase page response time, a better user experience.
Focus: As the mobile end of this operation there will be double-tap zoom, so the browser after the click to wait for 300ms, see the user clicks there is no next time, that is, this operation is not a double-click.
Third, the browser developer solutions
1, Option One: Disable scaling
When the head of the HTML document contains the following metathe label:
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">Indicates that the page is not scalable , then double-tap zoom function does not make sense, then the browser can disable the default behavior and double click to zoom remove click delays of 300ms .
Disadvantages: is the need to pass completely disable the zoom to achieve remove click delays purposes, however, completely disable the zoom is not our intention, we just wanted to ban double-click the default scaling behavior , so do not wait for 300ms to determine whether the current operation is a double-click. In general, however, we hope that the page can pinch zoom to zoom in, for example, enlarge a picture, zoom in for a very small text.
2. Option II: Change the default viewport window
In order to make the desktop site display properly in the mobile terminal browser, mobile terminal browser's default viewport width! Width = device browser window, but the viewport width than the width of large equipment, usually 980px.
Our label can be set by the following the viewport width of width of the device .
<meta name="viewport" content="width=device-width">Mobile sit through adaptation and optimization, and this time you do not need a double click to zoom. If you can identify a site is responsive site, then the mobile terminal browser can automatically ban the default behavior and double click to zoom click to remove the delay of 300ms. If the aforementioned metalabel, and that the browser can be considered that the site has moved to end the adaptation and optimization done, no need to double-click the zoom operation.
This program compared to a benefit of the program is that it does not completely disable scaling, but only disable the browser's default double-click scaling behavior, but users can still zoom page zoom operation by two fingers .
In addition to the majority of IE browsers do not support the new CSS properties. touch-action CSS property. This attribute specifies the user-agent (ie browser) on the corresponding element can trigger the default behavior. If the value of this attribute is set to touch-action: none, it represents the operation on the element does not trigger any default behavior of the user agent, it is judged without delay of 300ms .
Fourth, the source solutions
1, Option One: pointer events polyfill
In addition to IE, most other browsers do not support pointer events. Some JS libraries, allows us to use a pointer event in advance. such as:
(1) Google's Polymer
(2) Microsoft HandJS
（3）@Rich-Harris 的 Points
Concern is not pointer events, but with 300ms latency associated CSS propertiestouch-action。由于除了IE之外的大部分浏览器都不支持这个新的CSS属性，所以这些指针事件的polyfill必须通过某种方式去模拟支持这个属性。一种方案是JS去请求解析所有的样式表，另一种方案是将touch-action作为html标签的属性。
2. Option II: FastClick
FastClick is FT Labs a lightweight designed to address the mobile terminal browser 300 millisecond latency issues clicks developed libraries. The principle FastClick is detected when touchend event simulation will start immediately through a custom event DOM click event, and the event browser, click the stop after 300ms off.
Fifth, click penetrating questions
Then click on the mobile side 300ms latency issues, but also have to mention the problem of mobile end Click penetration. Now click click 300ms delay, and that the touch screen, we listen directly touchstart event does not like it?
Use touchstart to replace the click event has two disadvantages.
First: touchstart a finger touches the screen triggers, sometimes users just want to slide the screen, but it triggered touchstart event, this is not what we want;
Second: Use touchstart events may appear Click penetration phenomenon in some scenarios.
1. What is click penetrate?
If there are two page elements A and B. A B element on the element. We registered a callback function in the event touchstart B elements, the role of the callback function is to hide the B element. We found that when we click on the B element, B element is hidden, then, A element triggers the click event.
This is because the mobile terminal browser , order of events is touchstart> touchend> the Click . The click event of delay 300ms, when the B element hiding touchstart event, after a 300ms, browser triggered the click event, but this time the B element gone, so the event is distributed to the A element body. If A is a link to that page at this time will unexpectedly jump.
2. Click penetration phenomenon three cases
(1) Click penetrating question: Click the Close button on the mask layer (mask), mask layer disappeared after the discovery triggered the event click the button below elements.
(2) Cross-page click penetrate question: If the button below happens to be an href attribute of a label, the page will jump to jump label as a default click event is triggered, so exactly the same principles and the occurrence of the above
(3) Click penetrating question: This is not a mask, just click the button to jump to a new page within the page, click the event and then found a new page in the corresponding position of the element has been triggered.
3, solutions
Two kinds of ideas:
(1) Do not mix and touch the Click . Since the touch 300ms after trigger click, just click with touch or only with naturally there will be no problem.
(2) spent (or is consumed) click after the touch. Still with a tap, but in the case of possible penetration of clicks to do additional processing, get something to block or delay of 350 milliseconds after the tap again to hide mask, pointer-events, the following elements in the event handler to do testing (with global flag)
Detailed program:
(1) only touch
The most simple solution, the perfect solution to penetrate click problem.
All the click within the page into all of the touch event touchstart , 'touchend', 'tap' , to note a tag, the href tag is a click, need to be removed into js jump control, or directly into the control span + tap Jump.
(2) only click
Last resort, because it will bring 300ms delay, any inside page of a custom interactions will increase 300 ms latency, think about all slow. 300ms after trigger click the problem would not exist without touch touch.
(3) take a something blocking
Stupid way, do not use.
After (4) tap delay of 350ms and then hide mask
Minimal changes, the disadvantage is hiding mask slower, 350ms or feel slow.
（5）pointer-events
Too much trouble and there is a defect, it is not recommended. After the mask hidden button below to add the element pointer-events: none; style, so click through to go after 350ms remove this style, recovery response. Defects within 350ms after the disappearance of the mask, the user can see the button below elements lit did not respond, if you will hand speed, then quickly found.
(6) In the event handler in the following elements do testing (with the global flag)
Too much trouble, is not recommended. Click the record button flag global position (coordinate points), in the following elements of the event handler to determine the coordinates of the points event, if it is the same as that nasty click, refused to respond.
（7）fastclick
Easy to use solution, do not mind a few KB to load, it is not recommended, because someone met bug,
First introduced fastclick stock, then page all touch events into click, in fact, a little bit of trouble, it is proposed to introduce a few KB to point to solve the problem through not worth it, it is better to use the first method.
I. Introduction
End mobile browsers offers a special feature: Double-click (double tap) scaling.
Second, the moving-end delay of 300ms reasons
Why use a touch event? Touch event is unique to the mobile terminal browser html5 event.
Because the mobile terminal click great delay (approximately 300ms), 300ms delay judgment from the double-click and long press , because only the default expiration of the waiting period to determine when there is no follow-up action takes place, it will trigger a click event. The delay of the touch event is very short, the use of the touch event can increase page response time, a better user experience.
Focus: As the mobile end of this operation there will be double-tap zoom, so the browser after the click to wait for 300ms, see the user clicks there is no next time, that is, this operation is not a double-click.
Third, the browser developer solutions
1, Option One: Disable scaling
When the head of the HTML document contains the following metathe label:
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">Indicates that the page is not scalable , then double-tap zoom function does not make sense, then the browser can disable the default behavior and double click to zoom remove click delays of 300ms .
Disadvantages: is the need to pass completely disable the zoom to achieve remove click delays purposes, however, completely disable the zoom is not our intention, we just wanted to ban double-click the default scaling behavior , so do not wait for 300ms to determine whether the current operation is a double-click. In general, however, we hope that the page can pinch zoom to zoom in, for example, enlarge a picture, zoom in for a very small text.
2. Option II: Change the default viewport window
In order to make the desktop site display properly in the mobile terminal browser, mobile terminal browser's default viewport width! Width = device browser window, but the viewport width than the width of large equipment, usually 980px.
Our label can be set by the following the viewport width of width of the device .
<meta name="viewport" content="width=device-width">Mobile sit through adaptation and optimization, and this time you do not need a double click to zoom. If you can identify a site is responsive site, then the mobile terminal browser can automatically ban the default behavior and double click to zoom click to remove the delay of 300ms. If the aforementioned metalabel, and that the browser can be considered that the site has moved to end the adaptation and optimization done, no need to double-click the zoom operation.
This program compared to a benefit of the program is that it does not completely disable scaling, but only disable the browser's default double-click scaling behavior, but users can still zoom page zoom operation by two fingers .
In addition to the majority of IE browsers do not support the new CSS properties. touch-action CSS property. This attribute specifies the user-agent (ie browser) on the corresponding element can trigger the default behavior. If the value of this attribute is set to touch-action: none, it represents the operation on the element does not trigger any default behavior of the user agent, it is judged without delay of 300ms .
Fourth, the source solutions
1, Option One: pointer events polyfill
In addition to IE, most other browsers do not support pointer events. Some JS libraries, allows us to use a pointer event in advance. such as:
(1) Google's Polymer
(2) Microsoft HandJS
（3）@Rich-Harris 的 Points
Concern is not pointer events, but with 300ms latency associated CSS propertiestouch-action。由于除了IE之外的大部分浏览器都不支持这个新的CSS属性，所以这些指针事件的polyfill必须通过某种方式去模拟支持这个属性。一种方案是JS去请求解析所有的样式表，另一种方案是将touch-action作为html标签的属性。
2. Option II: FastClick
FastClick is FT Labs a lightweight designed to address the mobile terminal browser 300 millisecond latency issues clicks developed libraries. The principle FastClick is detected when touchend event simulation will start immediately through a custom event DOM click event, and the event browser, click the stop after 300ms off.
Fifth, click penetrating questions
Then click on the mobile side 300ms latency issues, but also have to mention the problem of mobile end Click penetration. Now click click 300ms delay, and that the touch screen, we listen directly touchstart event does not like it?
Use touchstart to replace the click event has two disadvantages.
First: touchstart a finger touches the screen triggers, sometimes users just want to slide the screen, but it triggered touchstart event, this is not what we want;
Second: Use touchstart events may appear Click penetration phenomenon in some scenarios.
1. What is click penetrate?
If there are two page elements A and B. A B element on the element. We registered a callback function in the event touchstart B elements, the role of the callback function is to hide the B element. We found that when we click on the B element, B element is hidden, then, A element triggers the click event.
This is because the mobile terminal browser , order of events is touchstart> touchend> the Click . The click event of delay 300ms, when the B element hiding touchstart event, after a 300ms, browser triggered the click event, but this time the B element gone, so the event is distributed to the A element body. If A is a link to that page at this time will unexpectedly jump.
2. Click penetration phenomenon three cases
(1) Click penetrating question: Click the Close button on the mask layer (mask), mask layer disappeared after the discovery triggered the event click the button below elements.
(2) Cross-page click penetrate question: If the button below happens to be an href attribute of a label, the page will jump to jump label as a default click event is triggered, so exactly the same principles and the occurrence of the above
(3) Click penetrating question: This is not a mask, just click the button to jump to a new page within the page, click the event and then found a new page in the corresponding position of the element has been triggered.
3, solutions
Two kinds of ideas:
(1) Do not mix and touch the Click . Since the touch 300ms after trigger click, just click with touch or only with naturally there will be no problem.
(2) spent (or is consumed) click after the touch. Still with a tap, but in the case of possible penetration of clicks to do additional processing, get something to block or delay of 350 milliseconds after the tap again to hide mask, pointer-events, the following elements in the event handler to do testing (with global flag)
Detailed program:
(1) only touch
The most simple solution, the perfect solution to penetrate click problem.
All the click within the page into all of the touch event touchstart , 'touchend', 'tap' , to note a tag, the href tag is a click, need to be removed into js jump control, or directly into the control span + tap Jump.
(2) only click
Last resort, because it will bring 300ms delay, any inside page of a custom interactions will increase 300 ms latency, think about all slow. 300ms after trigger click the problem would not exist without touch touch.
(3) take a something blocking
Stupid way, do not use.
After (4) tap delay of 350ms and then hide mask
Minimal changes, the disadvantage is hiding mask slower, 350ms or feel slow.
（5）pointer-events
Too much trouble and there is a defect, it is not recommended. After the mask hidden button below to add the element pointer-events: none; style, so click through to go after 350ms remove this style, recovery response. Defects within 350ms after the disappearance of the mask, the user can see the button below elements lit did not respond, if you will hand speed, then quickly found.
(6) In the event handler in the following elements do testing (with the global flag)
Too much trouble, is not recommended. Click the record button flag global position (coordinate points), in the following elements of the event handler to determine the coordinates of the points event, if it is the same as that nasty click, refused to respond.
（7）fastclick
Easy to use solution, do not mind a few KB to load, it is not recommended, because someone met bug,
First introduced fastclick stock, then page all touch events into click, in fact, a little bit of trouble, it is proposed to introduce a few KB to point to solve the problem through not worth it, it is better to use the first method.