jquery同一元素绑定click与dblclick事件

同一元素绑定单击(click)与双击(dblclick)事件时，双击触发dblclick的同时会触发两次click事件

<button type="button" class="btn-sample">测试按钮</button>
<script>
    $('.btn-sample').on('click', function () {
        console.log('click');
    });
    $('.btn-sample').on('dblclick', function () {
        console.log('dblclick');
    });
</script>

双击测试按钮时,控制台中会打印

click
click
dblclick

可以使用单击事件延迟执行的方式处理 jQuery 实现方案

<button type="button" id="btn-sample" data-alreadyClicked="false">测试按钮</button>
<script>
    var alreadyClickedTimeout;
    $('#btn-sample').on('click', function () {
        var $btn = $(this);
        if ($btn.data('alreadyClicked')) {
            // 双击
            console.log('dblclick');
            $btn.data('alreadyClicked', false); // 重置点击状态
            clearTimeout(alreadyClickedTimeout); // 阻止单击事件执行

        } else {
            $btn.data('alreadyClicked', true);
            alreadyClickedTimeout = setTimeout(function () {
                $btn.data('alreadyClicked', false); // 重置点击状态
                // 单击
                console.log('click');
                
            }, 200); // 单击事件间隔200毫秒以内会被认为是双击
        }
        return false;
    });
</script>

JavaScript实现方案

<button type="button" id="btn-sample" data-alreadyClicked="false">测试按钮</button>
<script>
    var alreadyClickedTimeout;
    var btn = document.getElementById('btn-sample');
    btn.addEventListener('click', function () {
        if (btn.getAttribute('data-alreadyClicked') == 'true') {
            // 双击
            console.log('dblclick');
            btn.setAttribute('data-alreadyClicked', 'false'); // 重置点击状态
            clearTimeout(alreadyClickedTimeout); // 阻止单击事件执行
        } else {
            btn.setAttribute('data-alreadyClicked', 'true');
            alreadyClickedTimeout = setTimeout(function () {
                btn.setAttribute('data-alreadyClicked', 'false'); // 重置点击状态
                // 单击
                console.log('click');
            }, 200); // 点击事件间隔200毫秒以内会被认为是双击
        }
    });
</script>