Fastclick causes the Click event to fire two times

Source: Internet
Author: User

I used the Fastclick library on the mobile web to solve the 300ms latency problem, but another strange bug was raised in the WebView under Android 4.2.

There is a button on page A, b button,a and B are all in the same position, a click event is registered for both A and B. A's Click event triggers and jumps to page B. When a is clicked on the B page, you will notice that the click event of the B button is also triggered.

Yes, the event ' penetrated ' two pages!

But actually did not penetrate, when clicked a button, actually has the following two actions:

    1. Fastclick The Click event triggered by an event such as Touchstart, just the first click.
    2. The Click event after the original 300ms delay of the device. At this point the page is loaded into B, and this click is the B button on the B page.

In devices such as iOS, the second click event is actually blocked by Fastclick, so this problem does not occur, but in Android 4.2 browser The bug is blocked, causing the problem.

Looked up a lot of relevant information, the foreigner called this phenomenon ghost click , most of them do not have any effective solutions.

Finally, a hack scheme was found in StackOverflow, as follows:

preventclick  {width :  %  ; height :  %  ; position : absolute  ; z-index :    ; top :  0   ; left :  0   ;    
<body>    <div id="preventClick"></div></body>
function onDeviceReady() {    setTimeout(function(){ $(‘#preventClick‘300);}

The principle is that each page before 300ms is covered by a transparent Div, so the second click is not a point to the corresponding button.

Although this approach is more violent, it still works, but before there is no better way, you can hack it first.

Article FOREVERCJL
Article original CSDN Link: www.foreverpx.cn
Reprint please indicate the source.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Fastclick causes the Click event to fire two times

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.