In JavaScript, let click and double-click events separate __java

In JavaScript, if you bind the click and double click events on an element at the same time, the program responds to a double click event in response to a single double-click, and two clicks. In principle this should be correct, but in development often need to double-click and click to do different processing (such as common click to select, double-click to execute), the single double click event Mixed response brings a certain amount of trouble. The purpose of this is to make the click and double-click Events independent of each other and not interfere with each other.

First we need to figure out what the browser is passing to the DOM element when it clicks and double-clicks, that is, what JavaScript relies on to distinguish between clicks and double-clicks. Understand the principle, just good remedy.

For the sake of simplicity, take jquery, for example, to write the test code as follows:

$ ("#test"). Click (function (e) {
	var res = ';
	for (var i in e) {
		res = i + ': ' + e[i] + '/n ';
	}
	Alert (res);
});

Let's see what happens when you click.

IE

FF

originalevent: [Object] undefined:undefined which:undefined wheeldelta:0-View:und efined Type:click toelement:null timestamp:1229092321548 target: [Object] Srcelement: [Object] Shiftkey:false SC reeny:157 screenx:140 relatedtarget:undefined relatednode:undefined prevvalue:undefined pagey:35 pagex:138 o riginaltarget:undefined newvalue:undefined metakey:undefined keycode:0 handler:function (e) {} fromelement:null eventphase:undefined detail:undefined data:undefined currenttarget:undefined ctrlkey:false clienty:37 : 140 charcode:undefined cancelable:undefined button:0 bubbles:undefined attrname:undefined Ed Jquery1229092320454:true preventdefault:function () {if (D.preventdefault) D.preventdefault ();d. ReturnValue=false } stoppropagation:function () {if (d.stoppropagation) d.stoppropagation ();d. cancelbubble=true}

Originalevent: [Object MouseEvent] undefined:undefined which:1 wheeldelta:undefined view: [Object Window] Type:c Lick toelement:undefined timestamp:11258562 target: [object Htmldivelement] srcelement:undefined shiftkey:false s creeny:154 screenx:124 relatedtarget:null relatednode:undefined prevvalue:undefined pagey:46 pagex:124 Origi Naltarget: [Object htmldivelement] newvalue:undefined metakey:false keycode:undefined handler:function (e) {} fro melement:undefined eventphase:2 detail:1 data:undefined currenttarget: [Object Htmldivelement] Ctrlkey:false cl ienty:46 clientx:124 charcode:undefined cancelable:true button:0 bubbles:true attrname:undefined attrChange : Undefined jquery1229092311220:true preventdefault:function () {if (D.preventdefault) {D.preventdefault ();} D.returnvalue = false;} Stoppropagation:function () {if (d.stoppropagation) {d.stoppropagation ();} D.cancelbubble = true;}

After you change the test code event to DblClick, you can easily get the result of double-clicking

IE

FF

originalevent: [Object] undefined:undefined which:undefined wheeldelta:0-View:und efined Type:dblclick toelement:null timestamp:1229094138735 target: [Object] Srcelement: [Object] Shiftkey:false screeny:173 screenx:126 relatedtarget:undefined relatednode:undefined prevvalue:undefined pagey:51 4 originaltarget:undefined newvalue:undefined metakey:undefined keycode:0 handler:function (e) {} fromelement:nu ll eventphase:undefined detail:undefined data:undefined currenttarget:undefined ctrlkey:false clienty:53 tx:126 charcode:undefined cancelable:undefined button:0 bubbles:undefined attrname:undefined Fined Jquery1229094137079:true preventdefault:function () {if (D.preventdefault) D.preventdefault ();d. returnValue= False} stoppropagation:function () {if (d.stoppropagation) d.stoppropagation ();d. cancelbubble=true}

originalevent: [Object MouseEvent] undefined:undefined which:1 wheeldelta:undefined View : [Object Window] Type:dblclick toelement:undefined timestamp:1229094216813 target: [Object Htmldivelement] Srcele ment:undefined shiftkey:false screeny:141 screenx:137 relatedtarget:null relatednode:undefined efined pagey:33 pagex:137 originaltarget: [Object htmldivelement] newvalue:undefined metakey:false Keycode:unde Fined Handler:function (e) {} fromelement:undefined eventphase:2 detail:2 data:undefined currentTarget: [Object Htmldivelement] Ctrlkey:false clienty:33 clientx:137 charcode:undefined cancelable:true button:0 bubbles:tr UE attrname:undefined attrchange:undefined jquery1229094214813:true preventdefault:function () {if (D.preventDefault) {D.preventdefault ();} D.returnvalue=false;} Stoppropagation:function () {if (d.stoppropagation) {d.stoppropagation ();} D.cancelbubble=true;}

Note that the type and detail are the types that mark the events, detail are unique to Firefox, and the clicks are counted, the first time you double-click is 1, and the second is 2.

That is to say in FF, there is still a way to distinguish two clicks, but regardless of the double click, Detail start counting from 1, so the attributes you want to bring from the event do not achieve the purpose of the independent event.

Here is a single double click on the solution, provides a way of thinking, simply will be the first click of the delay to perform, if a second click during the delay, cancel the first click of the execution.

According to the above method we can simulate the approximate effect, can see the demo, in addition to the click Time Delay, the basic realization of the event independence.