js鼠標(biāo)單擊和雙擊事件沖突問題的快速解決方法

字號(hào):


    下面小編就為大家?guī)硪黄猨s鼠標(biāo)單擊和雙擊事件沖突問題的快速解決方法。小編覺得挺不錯(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)單擊和雙擊事件沖突問題的快速解決方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考