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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM