javascript implements the method of co clicking and double clicking
- 2020-05-05 10:53:19
- OfStack
This article illustrates an example of how javascript can implement both a single click and a double click. Share with you for your reference. The specific analysis is as follows:
When we made the web development process often meet such a problem, as a link to register click events, or make a button or other elements above registered click or double-click the event at the same time, this time we found the page click events seem to never work, the reason is that, when we click on a was intercepted by the hyperlinks or click event, this paper describes a concrete method of how to solve the technical problems. The implementation principle of this solution is that both the click event and the double-click event invoke the same method, and we judge whether it is a click or double-click event according to the time interval between two mouse clicks. After a short period of time, if there is no next click, the corresponding operation will be called. If there is a next click, the double click will be called.
For a detailed description, go to the following code listing:
<HTML>
<HEAD>
<TITLE> javascript Realize the coexistence of single click and double click </TITLE>
<META NAME=" Generator" CONTENT=" EditPlus" >
<META NAME=" Author" CONTENT=" //www.jb51.net/" >
<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 on the " );
}
function doDoubleClick(which) {
var d = new Date();
dcAt = d.getTime();
if (savTO != null) {
savTO = null;
}
showMe(" Double click on the " );
}
//-->
</SCRIPT>
<p>
<a href=" javascript:void(0)"
onclick=" handleWisely(event.type)"
ondblclick=" handleWisely(event.type)"
style=" color: blue; font-family: arial; cursor: hand" >
Click here to see the results:
</a>
</p>
<form>
<table>
<tr>
<td valign=" top" >
Event patterns : <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 has been helpful to your javascript programming.