jquery - 双击事件触发时如何取消单击事件

Question

双击事件触发时如何取消单击事件？

我已经看过一些相关的，我发现了一些有用的东西

检测到双击事件时需要取消单击/鼠标事件

function singleClick(e) {
    // do something, "this" will be the DOM element
}

function doubleClick(e) {
    // do something, "this" will be the DOM element
}

$(selector).click(function(e) {
    var that = this;
    setTimeout(function() {
        var dblclick = parseInt($(that).data('double'), 10);
        if (dblclick > 0) {
            $(that).data('double', dblclick-1);
        } else {
            singleClick.call(that, e);
        }
    }, 300);
}).dblclick(function(e) {
    $(this).data('double', 2);
    doubleClick.call(this, e);
});

但是，如果我使用 .on("click") 而不是 .click()，则此代码不起作用。

知道这是为什么吗？我必须使用 .on() 所以使用 .click() 不是一个选项

Answer 1

如果您执行 .on('click')，则需要执行 .on('dblclick')。（在 dbl 没有触发的情况下也有同样的问题）

此外，如果事件没有触发，可能是因为您在此函数完成后添加了选择器。

所以...

...而不是 $(selector).on('click', function(){}) ...do $(selectors parent).on('click', selector, function(){})。

这是对 .live() 的超级简洁升级

function singleClick(e) {
    // do something, "this" will be the DOM element
}

function doubleClick(e) {
    // do something, "this" will be the DOM element
}

$('selector-parent').on('click', 'selector', function(e) {
    var that = this;
    setTimeout(function() {
        var dblclick = parseInt($(that).data('double'), 10);
        if (dblclick > 0) {
            $(that).data('double', dblclick-1);
        } else {
            singleClick.call(that, e);
        }
    }, 300);
}).on('dblclick', 'selector', function(e) {
    $(this).data('double', 2);


doubleClick.call(this, e);
});