HTML on mobile page design is a touch event note

HTML on mobile page design is a touch event note

Mobile-Touch Events

Touch events that trigger when a user's finger is placed on a mobile device that slides on the screen
touchstart--occurs when the finger touches the screen. No matter how many fingers are present
touchmove--A continuous trigger when the finger is sliding on the screen. Usually we slide the page again, and the Preventdefault () that invokes the event can prevent the default from happening: Prevent page scrolling
touchend--triggered when the finger leaves the screen
The touchcancel--system stops tracking when the touch is triggered. For example, in the process of touching a sudden page alert () A prompt box, which will trigger the event, this event is less used

Mobile Click Screen generates 200-300 MS Latency response

Web pages on mobile devices are 300ms delayed, and playing can cause button click Delay or even click Invalidation.

Here are the historical reasons for sharing a colleague from a company:

In 2007, Apple released the first iphone on the iOS system with safari in order to apply to the PC-side of the large screen can be better displayed on the mobile phone, using double-click Zoom (double tap to zoom) scheme, such as you on the phone with a browser to open a Web page on a PC , you may see the page content although can fill the entire screen, but the font, pictures are very underestimated, at this time you can quickly double-click on a part of the screen, you can see the part of the enlarged content, double-click to return to the original state.

Double-click Zoom refers to a quick click on the screen with your finger two times, and IOS comes with a Safari browser that zooms the page to its original scale.

The reason for this is how the browser needs to determine the quick click, when the user clicks an element on the screen, such as a jump link <a href= "#" ></a>, where the browser captures the click First, However, the browser can not determine whether the user is simply to click on the link or double-click on the area to zoom, so, after capturing the first click, the browser will hold a period of time t, if the user does not make the next click in the t time interval, then the browser will do a click Jump link processing, If the user makes a second click in the T-time, the browser disables the jump and instead zooms in on that portion of the area's page. So how much does this time interval t have? Under iOS Safari, it's about 300 milliseconds. This is the origin of the delay. The consequences of the user simply click on the page, the page takes a while to respond, give the user a sense of slow experience, for the web Developer, the page JS capture Click event callback function processing, requires 300ms before it takes effect, also indirectly lead to affect the processing of other business logic.

Solution:

Fastclick can resolve 300ms latency of click events on the phone
Zepto's Touch module, the Tap event is also designed to address latency issues in the Click

Response Order of touch events

1, Ontouchstart
2, Ontouchmove
3, Ontouchend
4. onclick

Solve problems with 300ms latency, or you can speed up response to events by binding Ontouchstart events

HTML on mobile page design is a touch event note