双击事件触发时,如何取消单击事件?
我已经看过一些相关内容,但我发现了一些有效的内容
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()不是一个选项
答案 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);
});