下面小編就為大家?guī)?lái)一篇js鼠標(biāo)單擊和雙擊事件沖突問(wèn)題的快速解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。
情況一
如果在一個(gè)DOM對(duì)象上同時(shí)綁定單擊(click)和雙擊(dblclick)事件，當(dāng)在這個(gè)DOM對(duì)象上發(fā)生雙擊事件時(shí)，第一次點(diǎn)擊（click）會(huì) 觸發(fā)一次單擊（click）事件，第二次點(diǎn)擊（連續(xù)的）也會(huì)觸發(fā)雙擊（dblclick）事件，還是會(huì)觸發(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>
解釋：
第一次點(diǎn)擊記錄下點(diǎn)擊的時(shí)間，并設(shè)置單擊事件的Timeout（250ms比較合適），第二次點(diǎn)擊時(shí)判斷此時(shí)點(diǎn)擊的時(shí)間與上次點(diǎn)擊的時(shí)間間隔，如果小于指 定的事件間隔（比如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>
以上這篇js鼠標(biāo)單擊和雙擊事件沖突問(wèn)題的快速解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試