JavaScript双击、单击事件并存的一种解决思路

发生场景：在有些场景下，页面的一个按钮或者图片或者其它元素可能需要区分单击和双击事件，以完成不同事件的触发。但是单击和双击这两个事件在同一时间线上，存在后者覆盖前者的情况，若要区分这两者，还得需要做点小手脚。

基本思路：通过设置两次点击事件的间隔时间(setTimeout方法)，来实现双击、单击事件并存。在双击事件(dbclick)过程中，将先后触发两次的单击事件(click)和一次双击事件(dbclick)。如果两次单击间隔不超过一定时间间隔（例如：300毫秒），那么就可以认定为双击事件，否则为单击事件。

实现步骤：先在触发的第二次延时单击事件(click)中取消第一次单击事件中未执行的方法，并且在这次（第二次）延时的单击事件(click)中触发双击事件(dblclick)。再在由第二次单击事件(click)触发的双击事件(dblclick)中取消第二次延时的单击事件中未执行的方法。

图解：

javascript代码片段：

      <script type="text/javascript">

            var intervalTimer = null;

            function do_click(event) {

                  clearTimeout(intervalTimer); //取消上次延时未执行的方法

                  intervalTimer = setTimeout(function () {

                        alert("单击");

                  }, 300);

            }

            function do_dblclick(event) {

                  clearTimeout(intervalTimer);

                  alert("双击");

            }

      </script>

      <p οnclick="do_click()" οndblclick="do_dblclick()">点击我试试</p>