javascript双击事件取消默认的两次单击事件

当一个元素同时具有单击和双击事件时，双击时会触发2次单击和1此双击事件。

双击会：先第1次单击，同时触发第2次和双击事件。

造成的不好影响：每次单击事件会延迟执行。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        var id;
        window.onload = function () {
            document.getElementById('divdemo').onclick = function () {
                //清除的是双击事件的第2次单击事件id
                clearTimeout(id);//这句代码放setTimeout下面，也同样将下面的定时器关掉。
                id = setTimeout(function () {//不论单双击，每点击一次就会立马产生一个定时器id，产生的id和这个定时器执行与否（什么时候执行）没有关系。
                    alert(id);//单击操作
                }, 300);
                //clearTimeout(id);
            }
            document.getElementById('divdemo').ondblclick = function () {
                //清除的是双击事件的第1次单击事件id
                clearTimeout(id);
                alert(id);//双击操作
            }
        }
    </script>
</head>
<body>
    <div id="divdemo" style="width: 400px; height: 400px; background-color: red">
    </div>
</body>
</html>

只有单击，

    <script type="text/javascript">
        var id;
        window.onload = function () {
            document.getElementById('divdemo').onclick = function () {
                //清除的是双击事件的第2次单击事件id
                //clearTimeout(id);//这句代码放setTimeout下面，也同样将下面的定时器关掉。
                id = setTimeout(function () {//不论单双击，每点击一次就会立马产生一个定时器id，产生的id和这个定时器执行与否（什么时候执行）没有关系。
                    alert(id);//单击操作
                }, 300);
                clearTimeout(id);//只有单击时，只能放这，才会让单击事件不执行
            }
        }
    </script>

<body>
    <div id="divdemo" style="width: 400px; height: 400px; background-color: red">
    </div>
</body>