Solve the problem of two click events triggered by the dbclick event in jquery

Document directory

• Generation Principle Analysis
• Solution
• Problem Summary
• Note:

In jquery event binding, dbclick can trigger two click events. For example, a DOM element div is boundClickAnd bind the dblclick event. The two events must be independent. If there is no conflict in event processing, you can complete the respective operations. Double-clickDblclickBut before that, the click event is also executed. How can we disable or block this excessive click event? This article provides you with a better solution.

Generation Principle Analysis

First, let's take a look at the sequence of click events:

Click: mousedown, mouseup, click
Double-click: mousedown, mouseup, click, mousedown, mouseup, click, dblclick
Therefore, before the occurrence of the dblclick event, two click events were actually performed. The first click will be blocked, but the second click will not, so the click event will be triggered when the double-click occurs.

Solution

Knowing the reason, the next step is to find a way to block this click. However, since each browser does not provide a method to stop the event directly, it is worth changing the thinking.
Because we only need to block a click event once, we can use the setTimeout () method to delay the processing of the click event, and use it when we need to stop the click event.clearTimeout()Method to stop processing this event. In this way, you can easily write the following JavaScript code:

var timer = null; 

Function do_click (event) {cleartimeout (timer); // here we add a sentence to ensure compatibility with Gecko browsers/If (event. detail = 2) return; // role of the preceding sentence timer = setTimeout (function () {// Click Event Processing}, 300);} function do_dblclick (Event) {cleartimeout (timer); // process the dblclick event}

Problem Summary

From the test results, if the first and second clicks are about 300 ms, the click and dblclick events may be called at the same time, however, if the interval is shorter or longer, only click or dblclick events will occur.
Therefore, it should be said that this method has largely avoided the "same time" of the click and dblclick events. Of course, it has not been completely solved.

Note:

In the Windows Control Panel, you can double-click the mouse to adjust the speed (Linux and other systems can be called, I do not know), this will have a certain impact on the program, you can try it by yourself ~
After testing, the latency of 300 ms is an ideal event, considering friends who are not very smooth with the mouse operation and the response speed of click events.
The above code has been tested only in IE6, IE7, IE8, ff3, and chrome, and no problem occurs.

The W3C standard does not contain dblclick, but uses event. Detail to determine whether a click or double-click