本文實例講述了javascript實現單擊和雙擊並存的方法。分享給大家供大家參考。具體分析如下：
在我們進行網頁開發的過程中經常會遇到這麼一個問題，為一個鏈接注冊雙擊事件，或者讓一個按鈕或者其他元素上面同時注冊單擊或者雙擊事件，這時候我們發現網頁中的雙擊事件似乎永遠都不會起作用，原因是當我們點擊一次的時候，就被超鏈接或者單擊事件截獲了，本文描述了一個如何解決這個技術問題的具體方法。本解決方案的實現原理是，單擊事件和雙擊事件都調用同一個方法，我們根據兩次鼠標點擊的間隔時間來判斷到底是單擊還是雙擊事件。單擊事件來臨的時候先不調用，等一小段時間，過了這段時間，如果沒有下一次單擊來臨就開始調用單擊對應的操作，如果有下一次點擊就調用雙擊。
詳細描述請參加下面代碼清單：
復制代碼 代碼如下:<HTML>
<HEAD>
<TITLE> javascript 實現單擊和雙擊並存 </TITLE>
<META NAME=" Generator" CONTENT=" EditPlus" >
<META NAME=" Author" CONTENT=" http://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(" 單擊" );
}
function doDoubleClick(which) {
var d = new Date();
dcAt = d.getTime();
if (savTO != null) {
savTO = null;
}
showMe(" 雙擊" );
}
//-->
</SCRIPT>
<p>
<a href=" javascript:void(0)"
onclick=" handleWisely(event.type)"
ondblclick=" handleWisely(event.type)"
style=" color: blue; font-family: arial; cursor: hand" >
點擊一下看看結果：
</a>
</p>
<form>
<table>
<tr>
<td valign=" top" >
事件模式: <textarea rows=" 4" cols=" 60" wrap=" soft" > </textarea>
</td>
</tr>
<tr>
<td valign=" top" >
<input type=" Reset" >
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
希望本文所述對大家的javascript程序設計有所幫助。