jquery 單擊和雙擊事件沖突解決方案


 

引起沖突的代碼:

問題效果展示:

每一次觸發雙擊事件都會引起兩次單擊事件

 

解決沖突的代碼:

解決問題效果展示:

完美解決單擊事件和雙擊事件沖突問題

 

這里主要用到兩個HTML DOM Window對象中函數,settimeout(),clearTimeout()

我這里兩個單擊事件觸發的時間間隔設置在等於300毫秒,這里需要根據實際情況而定。

源碼如下:

復制代碼
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>
        <div>事件監控</div>
    </body>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        /*$(function() {
                    $("div").bind("click.a", function() { //單擊事件 
                        $("body").append("<p>click事件</p>");
                    })
                    $("div").bind("dblclick.a", function() { //雙擊事件 
                        $("body").append("<p>dblclick事件</p>");
                    })
                    $("div").bind("mouseover.a", function() { //鼠標經過元素的事件 
                        $("body").append("<p>mouseover事件</p>");
                    })
                    $("div").bind("mouseout.a", function() { //鼠標移出元素的事件 
                        $("body").append("<p>mouseout事件</p>");
                    })
                })*/
        $(function() {
            var timer = null;
            $("div").bind("click.a", function() { //單擊事件 
                clearTimeout(timer);
                timer = setTimeout(function() { //在單擊事件中添加一個setTimeout()函數,設置單擊事件觸發的時間間隔 
                    $("body").append("<p>click事件</p>");
                }, 300);
            })
            $("div").bind("dblclick.a", function() { //雙擊事件 
                clearTimeout(timer); //在雙擊事件中,先清除前面click事件的時間處理 
                $("body").append("<p>dblclick事件</p>");
            })
            $("div").bind("mouseover.a", function() { //鼠標經過元素的事件 
                $("body").append("<p>mouseover事件</p>");
            })
            $("div").bind("mouseout.a", function() { //鼠標移出元素的事件 
                $("body").append("<p>mouseout事件</p>");
            })
        })
    </script>

</html>
復制代碼


免責聲明!

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



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