【JavaScript】jQuery 实现耦合的鼠标单击与双击事件

jq 实现单击双击事件

jq 的 dblclick 和 click 互相独立，在触发 dblclick 的基础上也会触发两次 click
这里演示一种使其互相耦合的 demo

var click = false;
$().on('click', function () {
    
    
    if (click) {
    
    
        // 双击
        click = false;

    } else {
    
    
        click = true;
        setTimeout(function () {
    
    
            if (click) {
    
    
                // 单击
                click = false;
            }
        }.bind(this), 200)
    }
});

封装:

function dblclick(elementSelector, childSelector, dblCallback, clickCallback = undefined) {
    
    
    var click = false;
    $(elementSelector).on('click', childSelector || '', function () {
    
    
        if (click) {
    
    
            // 双击
            click = false;
            dblCallback.bind(this)();
        } else {
    
    
            click = true;
            setTimeout(function () {
    
    
                if (click) {
    
    
                    // 单击
                    console.log(this);

                    click = false;
                    clickCallback && clickCallback.bind(this)();
                }
            }.bind(this), 200)
        }
    });
}