js判斷鼠標(biāo)單擊或者雙擊事件 沖突問題的解決方法
單擊事件是指鼠標(biāo)發(fā)生一次點擊事件，經(jīng)歷了onmousedown,onmouseup,onclick的過程；雙擊事件是指鼠標(biāo)連續(xù)在同一位置連續(xù)點擊兩次，經(jīng)歷了onmousedown，onmouseup，onclick，onmousedown，onmouseup，onclick，ondblclick的過程；以下代碼驗證了這一點：
<!DOCTYPE html><html><head>
<title></title>
<meta charset="utf-8"></head><body>
<input type="button" onclick="test1()" ondblclick="test2()" value="點擊">
<script type="text/javascript">
function test1 () {
console.log('單擊');
} function test2 () {
console.log('雙擊');
} </script></body></html>發(fā)生單擊：
發(fā)生雙擊：
所以呢 如果想要單獨處理點擊和雙擊的事件怎么辦，這里我在網(wǎng)上大概了解了三個例子，分享出來順便整理一下：
方法一：
<!DOCTYPE html><html><head>
<title>判斷單擊or雙擊</title>
<meta charset="utf-8"></head><body>
<input type="button" onclick="test()" ondblclick="test()" value="點擊">
<div id="mxh"> </div>
<script type="text/javascript">
function test() {
if(event.type == "dblclick")
document.all.mxh.innerText = "你雙擊了我"; if(event.type == "click")
document.all.mxh.innerText = "你單擊了我";
}
</script></body></html>這是一個笨辦法，也就是通過事件的類型來判斷是單擊還是雙擊，然后將結(jié)果存到一個div里，結(jié)束后取div里的值來判斷是哪種類型。
方法二：
<!DOCTYPE html><html><head>
<title>判斷單擊or雙擊</title>
<meta charset="utf-8"></head><body>
<input type="button" onclick="aa()" ondblclick="bb()" value="點我">
<script type="text/javascript">
var timer = null;
function aa() {
clearTimeout(timer);
if (event.detail == 2) return ;
timer = setTimeout(function() {
console.log('單擊');
}, 300);
}
function bb() {
clearTimeout(timer);
console.log('雙擊');
} </script></body></html>分別來解釋吧。
單擊：用戶單擊觸發(fā)aa函數(shù)，清除定時器這個先不管，if里的意思是如果在同樣的地方執(zhí)行同種方法兩次，也就是雙擊的意思，退出這個函數(shù)，單擊嘛不會觸發(fā)if。下來給定時器賦值，300ms后執(zhí)行輸出單擊的這句話，如果單擊的話就不會在300ms里觸發(fā)其他事件，所以單擊解釋完畢。
雙擊：用戶雙擊觸發(fā)兩次click和一次dbclick。第一次先執(zhí)行aa函數(shù)，因為這是第一次所以不會return，300ms之間還沒有等單擊這兩個字輸出便再次觸發(fā)了aa函數(shù)，次數(shù)記為兩次，return出去，之后觸發(fā)bb函數(shù)，輸出雙擊兩個字。
方法三：
<!DOCTYPE html><html><head>
<title>判斷單擊or雙擊</title>
<meta charset="utf-8"></head><body>
<input type="button" onclick="aa()" ondblclick="bb()" value="點我">
<script type="text/javascript">
var isdb;
function aa(){
isdb=false;
window.setTimeout(cc, 500); function cc(){
if(isdb) return;
alert("單擊")
}
}
function bb(){
isdb=true;
alert("雙擊")
}
</script></body></html>先設(shè)定一個判斷變量，定義三個函數(shù)aa，bb，cc。
單擊：進(jìn)入aa函數(shù)，設(shè)置判斷變量為false，設(shè)置一個定時器，500ms后觸發(fā)cc函數(shù)，因為是單擊所以之后沒有了多余的操作，進(jìn)而順利進(jìn)入cc函數(shù)，判斷變量如果為真說明進(jìn)入過bb函數(shù)也就是執(zhí)行過dbclick的步驟，所以return，然而這里直接跳過去執(zhí)行了輸出單擊的操作。
雙擊：進(jìn)入aa函數(shù)，將判斷變量賦值為false，設(shè)置定時器，500ms之內(nèi)又進(jìn)入了aa函數(shù)然而一直沒有執(zhí)行cc函數(shù)，之后又執(zhí)行了bb函數(shù)，設(shè)置了判斷變量為真值，彈出雙擊二字，這時才開始進(jìn)入cc函數(shù)，因為判斷變量為真值，所以兩次都會return出去。
js鼠標(biāo)單擊和雙擊事件沖突問題的快速解決方法
情況一
如果在一個DOM對象上同時綁定單擊(click)和雙擊(dblclick)事件，當(dāng)在這個DOM對象上發(fā)生雙擊事件時，第一次點擊（click）會 觸發(fā)一次單擊（click）事件，第二次點擊（連續(xù)的）也會觸發(fā)雙擊（dblclick）事件，還是會觸發(fā)單擊（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>
解釋：
第一次點擊記錄下點擊的時間，并設(shè)置單擊事件的Timeout（250ms比較合適），第二次點擊時判斷此時點擊的時間與上次點擊的時間間隔，如果小于指 定的事件間隔（比如250ms），則判斷為雙擊事件，并clear已設(shè)置的Timeout（避免觸發(fā)單擊事件）。
第二種：
<title>區(qū)分單擊和雙擊-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>
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答??！ 點擊進(jìn)入論壇
