当前位置: 代码迷 >> Web前端 >> 解决单击跟双击事件冲突
  详细解决方案

解决单击跟双击事件冲突

热度:306   发布时间:2012-11-25 11:44:31.0
解决单击和双击事件冲突
第一种 :如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件,当在这个DOM对象上发生双击事件时,第一次点击(click)会触发一次单击(click)事件,第二次点击(连续的)也会触发双击(dblclick)事件,还是会触发单击(click)事件(IE7与firefox)。
     解决方法:

    <button   onclick="test(1)"   ondblclick="test(2)"></button>    
    <script>
    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>区分单击和双击</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.getElementById('result');
  result.innerHTML=result.innerHTML+"click<br>";
  reset();
}
function dobuleClick()
{
  var result=document.getElementById('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> 
  相关解决方案