JavaScript双击事件

JavaScript double click event?

本文关键字:事件 双击 JavaScript      更新时间:2023-09-26

脚本

var timer;
var firing = false;
var begen = function(id) {
    alert('one click');
};
var popupAc = function(id) {
    alert('double click');
};
function cc(id) {
    if (firing) {
        popupAc(id);
        clearTimeout(timer);
        firing = false;
        return;
    }
    firing = true;
    timer = setTimeout(function() {
        begen(id);
        clearTimeout(timer);
        firing = false;
    }, 250);
}​

Html

<div id="myID" onclick="cc()">Click Here</div>​

示例:http://jsfiddle.net/LXSZj/11/

问题:

它与ie和chrome配合使用很好,但在firefox中,当我双击时,我会得到两个警报功能。(警告双击事件和单击事件)

我该怎么修?

谢谢。

将clearTimeout移动到警报之上

clearTimeout(timer);
popupAc(id);

附言:我可能错了,只是猜测,这里没有萤火虫。。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
  var timer;
  var x = false;
  function myfun(){
    if(timer){
    clearTimeout(timer);
    alert('double click');   
    timer = 0;
     return;
    }
  timer = setTimeout(function(){
                    alert('singleclick');
                    timer=0;
                    clearTimeout(timer);                   
                },250)
            }
        </script>
        </head>
        <body>
         <p>If you singleclick/double-click on me, I will alert.</p>
            <p> i will also alert based on your click</p.
         <script>
       (function(){
     pelem = document.getElementsByTagName('p');
       for(var i=0;i<pelem.length;i++){
      pelem[i].addEventListener('click',myfun,false);
     }
   })()
  </script>
    </body>
      </html>

为了控制双击问题,我构建了这个函数,基本上对于每个你想防止用户点击过快、双击等的函数。你调用这个函数,并定义函数发布的时间范围。这对于避免API或端点调用毫无意义、重复或在某些情况下滥用是很有用的。

method_name参数正是您想要的任何标签,以防您想要使用console.log(running_methods)检查阻止的数组列表

用法示例:

                  
    var runnning_methods={};
    function preventQuickMethod(method_name,callback,delay_time){
    		if(!delay_time){var delay_time=500;}
    		if(runnning_methods[method_name]==1){return;}
    		setTimeout(function(){ runnning_methods[method_name]=0; console.info(method_name+" released");},delay_time);
    		runnning_methods[method_name]=1;
    		callback();
    }
      
      
      function nextpage(){
        preventQuickMethod("dismissSlot",function(){
            document.getElementById("btn").innerHTML="fired at "+Date.now();
        },1000);
    }
                        
<button onclick="nextpage()">Fire!</button>
<span id="btn" >EHHEHE</span>