When an element, such as div, is bound with a click event and a dblclick event, the two events must process a relatively independent business, that is, the dblclick event cannot be triggered during the click event, click cannot be triggered during dblclick.
When an element, such as: p, is bound with a click event and a dblclick event, the two events must process a relatively independent business, that is, a click event cannot trigger dblclick, dblclick cannot be triggered. In actual tests, it is found that when dblclick is performed, one click will always appear. This problem will be solved below.
Situation analysis
First, we need to know the execution sequence of click and dblclick. the test process is omitted. The following is the test result:
Click: mousedown -- mouseup -- click
Dblclick: mousedown -- mouseup -- click -- dblclick
From this point of view, before dblclick is triggered, it is actually executed twice, and the first click will be blocked (why? I don't know ).
Solution
The first thought of whether the event can be stopped, but found that the browser does not provide the corresponding method, if it is too difficult to implement, because the behavior associated with the click event must be made cancel.
Therefore, latency is the only solution I can think of. setTimeout () is used to delay the processing of the click event, and clearTimeout () is used to stop the event when the click needs to be blocked.
Code
The Code is as follows:
Var test = (function (){
Var clickText = 'click'
';
Var dblclickText = 'dblclick
';
Var timer = null;
Return {
Click: function (){
ClearTimeout (timer );
Timer = setTimeout (function (){
$ ('Body'). append (clickText );
},300 );
},
Dblclick: function (){
ClearTimeout (timer );
$ ('Body'). append (dblclickText );
},
Init: function (){
$ (Function (){
$ ('P'). click (test. click). dblclick (test. dblclick );
});
}
}
})();
Test. init ();
Html code
The Code is as follows:
Click
Or
Dblclick
Follow-up
The title of the article is not perfect, because in windows, the control panel allows you to double-click the mouse (other systems are not clear ), so the system double-click setting is slow, and the demo above will not take effect. Therefore, 300 ms is only an approximate one.
Author: Hu yangrui
