在jQuery中同时拥有mousedown / mouseup和dblclick
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在jQuery中同时拥有mousedown / mouseup和dblclick相关的知识,希望对你有一定的参考价值。
每当一个mousedown或mouseup处理程序附加到一个元素时,dblclick就无法附加(如果附加就无法工作),虽然这看起来很公平,有没有办法恢复dblclick功能而无需从头开始重写(叹息......)或者我错过了有关事件传播的内容?
答案
它工作 - 将此代码放在Firebug的这个页面上,你会看到它正常工作(尝试双击问题的文本):
($('.post-text')
.mousedown(function () { console.log('down'); })
.mouseup(function () { console.log('up'); })
.dblclick(function () { console.log('dbclick'); }));
没有Firebug?抓住它,我会等!
另一答案
虽然这个问题很老,但我想展示一下我是如何管理它的。
这个块不起作用:
$(element).on('mousedown', function(event) {
...
});
$(element).on('dblclick', function(event) {
...
});
但您可以使用此代码段创建相同的行为处理程序:
var clicks = 0, delay = 400;
$(element).on('mousedown', function(event) {
event.preventDefault();
clicks++;
setTimeout(function() {
clicks = 0;
}, delay);
if (clicks === 2) {
// double click event handler should be here
clicks = 0;
return;
} else {
// mousedown event handler should be here
}
});
另一答案
你的mousedown和mouseup不能:
- 做e.stopPropagate等
- 返回false
如果您的代码在它们之间没有冲突,它应该可以工作
另一答案
event.detail参数将计算您拥有的连续点击次数,以便可以使用它来检测是否发生了双击。
$('#mybutton').on('click',function(e) {
console.log("User left clicked!"); // do select code
if (e.button == 0 && e.detail == 2) {
console.log("User left doubleclicked!"); // do action code
}
});
以上是关于在jQuery中同时拥有mousedown / mouseup和dblclick的主要内容,如果未能解决你的问题,请参考以下文章
如何绑定 Mousedown 和 Touchstart,但不响应两者?安卓、jQuery
在没有 jQuery mobile 的移动设备上使用 mousedown 事件?
JQuery UI Draggable on long press 适用于 mousedown 但不适用于 touchstart