jq实现同一个元素单击事件和双击事件

在html中，同一个元素，同时绑定click，dbclick事件，执行单击事件时，不会触发双击事件，但是执行双击事件时，会触发两次单击事件

下面先给出上面这句话的可运行例子：
代码片段 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>
    <body>
        <button class="btn">想我吗？想就点哦！</button>
        <script type="text/javascript">
            $(function() {
                $(".btn").click(function(){
                    console.log(1);
                }).dblclick(function(){
                    console.log(2);
                });
            });
        </script>
    </body>
</html>

上面代码在浏览器F12-Console中会看到，单击时，会显示1，清空Console,双击时，我们会发现出现两个1和一个2！

那么下面我们来看下点击事件的执行顺序：
单击(click)：mousedown，mouseout，click；
　　双击(dblclick)：mousedown，mouseout，click ， mousedown，mouseout，click，dblclick；

在双击事件(dblclick)，触发的两次单击事件(click)中，第一次的单击事件(click)会被屏蔽掉（也就是被单击事件替换了），但第二次不会（单击双击一起触发）。也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。

那么，现在知道了单双击事件的原理，而我们经过细细推理，得出只要在不触发单击事件的情况下，干掉双击事件那一次单击事件就可以了！

那么下面先给出可运行的例子：

代码片段 2

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>

    <body>
        <button class="btn">想我吗？想就点哦！</button>
        <script type="text/javascript">
            $(function() {
                var times=null;
                $(".btn").click(function(){
                    clearTimeout(times);
                    times=setTimeout(function(){
                        console.log(1);
                    },300);
                });
                $(".btn").dblclick(function(){
                    clearTimeout(times);
                    console.log(2);
                });
            });
        </script>
    </body>

</html>