如何区分单击事件和双击事件？
如何区分单击事件和双击事件？
提问于 2011-03-31 16:24:18
我在li中有一个id为"my_id"的按钮。我用这个元素附加了两个jQuery事件
1.
$("#my_id").click(function() {
alert('single click');
});2.
$("#my_id").dblclick(function() {
alert('double click');
});但每次它都会给我single click
回答 15
Stack Overflow用户
回答已采纳
发布于 2011-03-31 16:30:30
您需要使用超时来检查在第一次单击之后是否还有另一次单击。
// Author: Jacek Becela
// Source: http://gist.github.com/399624
// License: MIT
jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
return this.each(function(){
var clicks = 0, self = this;
jQuery(this).click(function(event){
clicks++;
if (clicks == 1) {
setTimeout(function(){
if(clicks == 1) {
single_click_callback.call(self, event);
} else {
double_click_callback.call(self, event);
}
clicks = 0;
}, timeout || 300);
}
});
});
}用法：
$("button").single_double_click(function () {
alert("Try double-clicking me!")
}, function () {
alert("Double click detected, I'm hiding")
$(this).hide()
})<button>Click Me!</button>编辑：
如下所述，更喜欢使用原生dblclick事件：http://www.quirksmode.org/dom/events/click.html
或者是jQuery提供的：http://api.jquery.com/dblclick/
Stack Overflow用户
发布于 2018-12-27 10:17:03
您可以从event对象访问名为detail的本机属性，而不是使用更多的即席状态和setTimeout！
element.onclick = event => {
if (event.detail === 1) {
// it was a single click
} else if (event.detail === 2) {
// it was a double click
}
};现代浏览器甚至IE-9都支持它:)
来源：https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
Stack Overflow用户
发布于 2013-04-16 17:16:31
一个简单的函数。不需要jquery或其他框架。将您的函数作为参数传递
<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
<script>
function doubleclick(el, onsingle, ondouble) {
if (el.getAttribute("data-dblclick") == null) {
el.setAttribute("data-dblclick", 1);
setTimeout(function () {
if (el.getAttribute("data-dblclick") == 1) {
onsingle();
}
el.removeAttribute("data-dblclick");
}, 300);
} else {
el.removeAttribute("data-dblclick");
ondouble();
}
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5497073
复制相关文章
相似问题
腾讯云开发者
