Simulates native browser objects when using Fastclick on the mobile side

Source: Internet
Author: User

The mobile browser native Click event has a 300ms delay, which is the browser in order to distinguish whether the event is double-clicked or click.
(In fact, some mobile browsers do not support double-click events.) PC Chrome in Phone mode, when the user is prevented from double-clicking the Zoom page (that is, when there is a viewport meta tag, whether user-scalable is yes or no), the double-click Triggers two click events, but does not trigger the DblClick event. When the user is allowed to double-click the Zoom page (that is, when there is no viewport meta tag), the double-click does not trigger the Click event, does not trigger the DblClick event, but instead scales the page, and in normal mode (that is, PC mode), the double-click triggers the two click event First. And then trigger the DblClick event again)

The fastclick resolves the 300ms latency problem for click events, which is basically the following principle:
The Touchstart,touchmove,touchend event is not delayed, and when the Touchend event is triggered, if there is no movement from the Touchstart trigger to the Touchend trigger and the time interval does not exceed the bounds, Then execute Event.prentdefault () and manually distribute the Click event on the target element (Targetelement.dispatchevent (clickevent), The events distributed by Dispatchevent are as capable of being propagated as events triggered by our actual operations in the browser, namely, the capture phase and the bubbling phase. Because Event.prentdefault () is executed, the browser's native clicks and double-click events are no longer triggered.

Through the above explanation, we can know that after using Fastclick, it is impossible to distinguish between click and double-click, Fastclick all are considered to be clicking events, so we can only artificially simulate click events and double-click events (300ms only one click for the Click event, Otherwise, double-click or multi-click event).

Customizing the Click event to the $elem element
function Customclick ($elem) {
var lasttouch,//Time of last Touchstart trigger
Touching,//is touching the screen
Moved,//whether Touchmove
Multiclick,//Whether single finger multi-hit
Multifinger; Whether to refer to the operation

function Ontouchstart (event) {
var t = 300,
Time = new Date (). GetTime ();

if (event.touches.length!== 1) {//multi-finger operation
Multifinger = true;
} else {
if (Lasttouch && Time-lasttouch < T) {
!multiclick && $elem. DblClick (); Double-click event
Multiclick = true;
} else {
Multiclick = false;
Moved = FALSE;
Multifinger = false;
SetTimeout (function () {
No multi-finger operation, no multiple clicks, no touchmove during touch screen, and now no touch screen
!multifinger &&!touching &&!multiclick &&!moved && $elem. clicked ();
}, T);
}
}

Lasttouch = time;
Touching = true;
}

function Ontouchend (event) {
!event.touches.length && (touching = false);
}

function Ontouchmove (event) {
Moved = TRUE;
}

$elem. On (' Touchstart ', Ontouchstart). On (' Touchend ', Ontouchend). On (' Touchmove ', ontouchmove);
}

Simulates native browser objects when using Fastclick on the mobile side

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.