DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js鼠標單擊和雙擊事件沖突問題的快速解決方法
js鼠標單擊和雙擊事件沖突問題的快速解決方法
編輯:關於JavaScript     

情況一

如果在一個DOM對象上同時綁定單擊(click)和雙擊(dblclick)事件,當在這個DOM對象上發生雙擊事件時,第一次點擊(click)會 觸發一次單擊(click)事件,第二次點擊(連續的)也會觸發雙擊(dblclick)事件,還是會觸發單擊(click)事件(IE7與 firefox)。

解決方法:

<button onclick="test(1)" ondblclick="test(2)"></button>
<script language="javascript">
var i = 1;
function test(n)  {
i = n; 
var val = setTimeout("call();",250); 
if(i==2){
clearTimeout(val);
}
}
function  call()  { 
if(i==1){
alert('click');
}else if(i==2){
alert('dblclick');
}
} 
</script>

解釋:

第一次點擊記錄下點擊的時間,並設置單擊事件的Timeout(250ms比較合適),第二次點擊時判斷此時點擊的時間與上次點擊的時間間隔,如果小於指 定的事件間隔(比如250ms),則判斷為雙擊事件,並clear已設置的Timeout(避免觸發單擊事件)。

第二種:

<title>區分單擊和雙擊-www.jb51.net</title>
<script type="text/javascript">
var flag=0;
function clickTest()
{
 if(!flag)
 {
 setTimeout("tt2();",300);
 }
 flag++;
}
function reset()
{
 flag=0;
}
function singleClick()
{
 var result=document.getElementByIdx_x('result');
 result.innerHTML=result.innerHTML+"click<br>";
 reset();
}
function dobuleClick()
{
 var result=document.getElementByIdx_x('result');
 result.innerHTML=result.innerHTML+"dobule click<br>";
 reset();
}
function tt2()
{
 if(flag==1)
 {
 singleClick();
 }
 else
 {
 dobuleClick();
 }
}
</script>
</head>
<body>
<input type="button" ondblclick="clickTest();" onclick="clickTest();" value="click test" />
<div id="result"></div> 

以上這篇js鼠標單擊和雙擊事件沖突問題的快速解決方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved