JS中单击和双击的冲突处理

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <button type="button" id="button">点击我</button>
  <script type="text/javascript">
    function $(id){
      return document.getElementById(id);
    }
    var timer=null;
    $('button').addEventListener('click',function(e){
      clearTimeout(timer);
      timer=setTimeout(function(){//初始化一个延时
        console.log("1");
        // console.log(e);
      },250)
    },false);
    $('button').addEventListener('dblclick',function(){//双击事件会先触发两次单击事件,然后再执行双击事件,使用清除定时器来达到双击只执行双击事件的目的
      clearTimeout(timer);
      console.log("2");
    },false);
  </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/youcijibi/article/details/80819356