JQuery如何實現雙擊事件時不觸發單擊事件，解決鼠標單雙擊衝突問題

時間 2019-11-16

標籤 jquery 如何實現雙擊事件觸發單擊解決鼠標衝突問題欄目 JQuery 简体版

原文原文鏈接

在jQuery的事件綁定中，若是元素同時綁定了單擊事件(click)和雙擊事件(dblclick),那麼執行單擊事件(click)時，不會觸發雙擊事件(dblclick)，執行雙擊事件(dblclick)時卻會觸發兩次單擊事件(click)。html

但有時候咱們但願在執行雙擊事件的時候不去出發單擊事件，那究竟該如何實現呢？jquery

少bb 上代碼：spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button>按鈕</button>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            // var time = null;
            //
            // $('div').click(function () {
            //     // 取消上次延時未執行的方法
            //     clearTimeout(time);
            //     //執行延時
            //     time = setTimeout(function(){
            //         //do function在此處寫單擊事件要執行的代碼
            //     },300);
            // });
            //
            // $('div').dblclick(functin ({
            //     // 取消上次延時未執行的方法
            //     clearTimeout(time);
            //     //雙擊事件的執行代碼
            // });



            // 單雙擊 的時間 間隔 是300ms
            // 若是解決 單雙擊衝突  
            var timer = null;
            $('button').click(function(event) {
                clearTimeout(timer);
                // 定時器  300ms 一次性定時器
                timer = setTimeout(function(){
                    console.log('單機了');
                }, 300);

            });

            $('button').dblclick(function(event) {
                clearTimeout(timer);
                console.log('雙機了');
            });
        })
    </script>
</body>
</html>

相關標籤/搜索