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

时间:2012-07-09 08:23:55

标签: jquery

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

我已经看过一些相关内容,但我发现了一些有效的内容

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

1 个答案:

答案 0 :(得分:1)

如果你做.on('click')你需要做.on('dblclick')。 (有同样的问题,dbl没有触发)

此外,如果事件未触发,可能是因为您在此功能完成之后添加了选择器。

所以...

...而不是$(选择器).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);
});