Resolve the Dbclick event in jquery to trigger two click events

Source: Internet
Author: User

First thanks to this little brother! http://qubernet.blog.163.com/blog/static/1779472842011101505853216/

Too long in position.

In the jquery event binding, Dbclick can trigger two click events. For example, a DOM element Div, which binds both the Click event and the DblClick event, independently of the two events. There are no conflicts on event handling, and each can perform its own operation. While the DblClick event was executed while the double-click was performed, the Click event was also executed before, so how do you prohibit or block this extra click event? This article will provide you with a better solution.

Production principle Analysis
First, let's look at the order in which click events occur:

Click to: MouseDown, MouseUp, click
Double-click: MouseDown, MouseUp, click, MouseDown, MouseUp, click, DblClick
As a result, the DblClick event actually occurred two times before the Click event. Where the first click is blocked, but the second does not, so it appears on the double-click, also trigger the Click event.


Solutions
Know the reason, the next natural is to try to shield this click, but because each browser does not provide a way to stop the event directly, it is worth changing the thinking.
Since we only need to block a click event, it is thought that the SetTimeout () method can be used to delay the processing of the Click event and to stop the event by using the Cleartimeout () method when the click is needed. This makes it easier to write the following JavaScript code:

var timer = null; function Do_click (event) {
Cleartimeout (timer); In addition, this is to be compatible with Gecko's browser/
if (Event.detail = = 2)
return;
The function of the same sentence
Timer = setTimeout (function () {
Handling of the Click event
}, 300); }
function Do_dblclick (event) {
Cleartimeout (timer);
Handling of DblClick Events
}

Summary of issues
From the test results, if the time of two clicks is around 300ms, it is still easy to see the click and DblClick events being called simultaneously, and if the interval is shorter or longer, there will only be a click or DblClick event.
Therefore, it should be said that this method has largely avoided the "simultaneous" existence of the Click and DblClick events. Of course, it has not yet reached a level of complete resolution.

Attention
Windows Control Panel is adjustable mouse double-click speed (Linux and other systems can be adjusted, I am not clear), this is still a certain effect on the program, we can adjust their own to try ~
After testing, the delay of 300ms is a relatively ideal event, taking into account not only the mouse operation is not very smooth friends, but also the response speed of the Click event

The above code, only tested in IE6, FF3, Chrome, did not appear the problem

The standard is not DblClick, but by Event.detail to determine whether to click or double

**********************************************************************

**********************************************************************

"Judging whether double-clicking"

<inputtype= "button"onclick= "OneClick ()"ondblclick= "Twoclick ()"value= "point Me">                                    <Scriptlanguage= "JavaScript">                                        varV_result; functionOneClick () {V_result= false; Window.settimeout (Oneclick_nei, -)                                            functionOneclick_nei () {if(V_result!= false) return; Alert ("Click"); }                                        }                                        functionTwoclick () {V_result= true; Alert ("Double click"); }                                    </Script>

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.