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

Question

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

我已经查看了一些相关内容，并发现了一些有用的东西

Need to cancel click/mouseup events when double-click event detected

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', 选择器, function(){})。

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

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);
});