我在 li 中有一个带有 id 的按钮"my_id"。我用这个元素附加了两个 jQuery 事件
1.
$("#my_id").click(function() {
alert('single click');
});
2.
$("#my_id").dblclick(function() {
alert('double click');
});
但每次它都给了我 single click
如何区分单击事件和双击事件？
IT技术
javascript
jquery
jquery-events
2021-01-29 12:30:53
6个回答
dblclick事件的行为在Quirksmode 中进行了解释。
a 的事件顺序dblclick是：
- 鼠标按下
- 鼠标向上
- 点击
- 鼠标按下
- 鼠标向上
- 点击
- 双击
此规则的一个例外是（当然）Internet Explorer，其自定义顺序为：
- 鼠标按下
- 鼠标向上
- 点击
- 鼠标向上
- 双击
如您所见，在同一元素上同时侦听两个事件将导致对click处理程序的额外调用。
您需要使用超时来检查第一次点击后是否还有一次点击。
这是诀窍：
// 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/
事实证明，没有使用更多的临时状态和 setTimeout，detail您可以从event对象访问一个名为的本机属性！
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
一个简单的功能。不需要 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>
现代正确答案是接受的答案和@kyw 的解决方案之间的混合。您需要超时以防止第一次单击并event.detail检查以防止第二次单击。
const button = document.getElementById('button')
let timer
button.addEventListener('click', event => {
if (event.detail === 1) {
timer = setTimeout(() => {
console.log('click')
}, 200)
}
})
button.addEventListener('dblclick', event => {
clearTimeout(timer)
console.log('dblclick')
})<button id="button">Click me</button>