This article describes the method of coexisting click and double-click in JavaScript. Share it for your reference. The specific analysis is as follows:
In the process of web development, we often encounter this problem: register a double-click event for a link, or register a click or double-click event on a button or other element at the same time. At this time, we find that the double-click event in the web page will never work. The reason is that when we click once, it is intercepted by a hyperlink or click event. This article describes a specific method of how to solve this technical problem. The implementation principle of this solution is that both the click event and the double-click event call the same method. We judge whether it is a click or a double-click event based on the interval between the two mouse clicks. When the click event comes, don't call it first, wait for a short period of time. After this period of time, if there is no next click, start calling the corresponding operation of clicking. If there is a next click, call double-click.
For detailed description, please participate in the following code list:
Copy the code as follows: <HTML>
<HEAD>
<TITLE> javascript realizes click and double-click coexistence</TITLE>
<META NAME=" Generator" CONTENT=" EditPlus" >
<META NAME=" Author" CONTENT=" //www.VeVB.COM/" >
<META NAME=" Keywords" CONTENT=" " >
<META NAME=" Description" CONTENT=" " >
</HEAD>
<BODY>
<SCRIPT LANGUAGE=" JavaScript" >
<!--
var dcTime=250; // doubleclick time
var dcDelay=100; // no clicks after doubleclick
var dcAt=0; // time of doubleclick
var savEvent=null; // save Event for handling doClick().
var savEvtTime=0; // save time of click event.
var savTO=null; // handle of click setTimeOut
function showMe(txt) {
document.forms[0].elements[0].value += txt;
}
function handleWisely(which) {
switch (which) {
case "click" :
savEvent = which;
d = new Date();
savEvtTime = d.getTime();
savTO = setTimeout(" doClick(savEvent)" , dcTime);
break;
case "dblclick" :
doDoubleClick(which);
break;
default:
}
}
function doClick(which) {
if (savEvtTime - dcAt <= 0) {
return false;
}
showMe("Click" );
}
function doDoubleClick(which) {
var d = new Date();
dcAt = d.getTime();
if (savTO != null) {
savTO = null;
}
showMe("Double-click");
}
//-->
</SCRIPT>
<p>
<a href=" javascript:void(0)"
onclick="handleWisely(event.type)"
ondblclick="handleWisely(event.type)"
style=" color: blue; font-family: arial; cursor: hand" >
Click to see the results:
</a>
</p>
<form>
<table>
<tr>
<td valign="top" >
Event mode: <textarea rows=" 4" cols=" 60" wrap=" soft" > </textarea>
</td>
</tr>
<tr>
<td valign="top" >
<input type="Reset" >
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
I hope this article will be helpful to everyone's JavaScript programming.