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

【问题标题】：How to cancel single click event when double click event fires双击事件触发时如何取消单击事件
【发布时间】：2012-07-09 08:23:54
【问题描述】：

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

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

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() 不是一个选项

【问题讨论】：

.click 在内部调用.on，所以它应该可以工作。你怎么称呼它？如果必须使用事件委托，情况可能会有所不同。
Clicks have already happened如果你必须双击，那么在表面值当双击事件触发时如何取消单击事件？不起作用。
@Esailija 所以这意味着我不能取消，但我可以选择忽略它吗？
@arvinsim 我不确定你会怎么做，因为如果你的"dblclick" 处理程序触发，点击已经触发。任何超时 hack 都不能很好地工作，因为您无法知道操作系统用于双击的计时器值。我建议一种不依赖于这种“悖论”的替代 UI 设计：D

标签： jquery

【解决方案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);
});

【讨论】：