我在li中有一个ID为"my_id"的按钮。我使用此元素附加了two jquery个事件
1
$("#my_id").click(function() {
alert('single click');
});
2
$("#my_id").dblclick(function() {
alert('double click');
});
但每次它都会给我single click
答案 0 :(得分：74)
Quirksmode解释了dblclick事件的行为。
dblclick的事件顺序为：
此规则的一个例外是（当然）Internet Explorer的自定义顺序为：
如您所见，在同一元素上同时监听这两个事件将导致对click处理程序的额外调用。
答案 1 :(得分：55)
您需要使用超时来检查第一次点击后是否还有其他点击。
// 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/
答案 2 :(得分：23)
一个简单的功能。不需要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>
答案 3 :(得分：13)
我担心这种行为取决于浏览器：
不建议将处理程序绑定到 click和dblclick事件 相同的元素。的序列 触发的事件因浏览器而异 浏览器，有些接收两个 在dblclick和之前单击事件 其他人只有一个。双击 灵敏度（最大时间间隔 检测为双精度的点击 click）因操作系统而异 和浏览器，往往是 用户可配置的。
http://api.jquery.com/dblclick/
在Firefox中运行代码，click()处理程序中的alert（）会阻止您再次单击。如果删除此类警报，则会同时收到这两个事件。
答案 4 :(得分：10)
为了双击（单击两次），您必须先单击一次。 click()处理程序在您第一次点击时触发，并且自弹出警报后，您没有机会进行第二次点击以触发dblclick()处理程序。
更改处理程序以执行alert()以外的操作，您将看到该行为。 （也许改变元素的背景颜色）：
$("#my_id").click(function() {
$(this).css('backgroundColor', 'red')
});
$("#my_id").dblclick(function() {
$(this).css('backgroundColor', 'green')
});
答案 5 :(得分：7)
现代的正确答案是接受的答案和@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>
答案 6 :(得分：7)
这些答案都没有满足我的需求，所以我创建了一个灵感来自@AdrienSchuler发布的要点的解决方案。仅当您要将单击和双击绑定到元素时，才使用此解决方案。否则，我建议您使用原生的click和dblclick听众。
这些是差异：
setTimeout来处理点击或双击处理程序使用Javascript：
function makeDoubleClick(doubleClickCallback, singleClickCallback) {
var clicks = 0, timeout;
return function() {
clicks++;
if (clicks == 1) {
singleClickCallback && singleClickCallback.apply(this, arguments);
timeout = setTimeout(function() { clicks = 0; }, 400);
} else {
timeout && clearTimeout(timeout);
doubleClickCallback && doubleClickCallback.apply(this, arguments);
clicks = 0;
}
};
}
用法：
var singleClick = function(){ console.log('single click') };
var doubleClick = function(){ console.log('double click') };
element.addEventListener('click', makeDoubleClick(doubleClick, singleClick));
以下是jsfiddle中的用法，jQuery按钮是接受答案的行为。
答案 7 :(得分：5)
原来没有利用更多的即席状态和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
答案 8 :(得分：5)
基于 A1rPun 答案的另一个简单的Vanilla解决方案（请参阅his fiddle了解jQuery解决方案，两者都在this one）。
似乎要在用户双击时不触发单击处理程序，单击处理程序必然会在延迟后触发...
var single = function(e){console.log('single')},
double = function(e){console.log('double')};
var makeDoubleClick = function(e) {
var clicks = 0,
timeout;
return function (e) {
clicks++;
if (clicks == 1) {
timeout = setTimeout(function () {
single(e);
clicks = 0;
}, 250);
} else {
clearTimeout(timeout);
double(e);
clicks = 0;
}
};
}
document.getElementById('btnVanilla').addEventListener('click', makeDoubleClick(), false);
答案 9 :(得分：4)
以下是针对任意数量事件的jeum代码的替代方案：
var multiClickHandler = function (handlers, delay) {
var clicks = 0, timeout, delay = delay || 250;
return function (e) {
clicks++;
clearTimeout(timeout);
timeout = setTimeout(function () {
if(handlers[clicks]) handlers[clicks](e);
clicks = 0;
}, delay);
};
}
cy.on('click', 'node', multiClickHandler({
1: function(e){console.log('single clicked ', e.cyTarget.id())},
2: function(e){console.log('double clicked ', e.cyTarget.id())},
3: function(e){console.log('triple clicked ', e.cyTarget.id())},
4: function(e){console.log('quadro clicked ', e.cyTarget.id())},
// ...
}, 300));
cytoscape.js应用需要此功能。
答案 10 :(得分：4)
使用优秀的jQuery Sparkle插件。该插件为您提供了检测第一次和最后一次点击的选项。您可以使用它来区分click和dblclick，方法是检测第一次单击后是否有另一次点击。
上查看答案 11 :(得分：3)
我写了一个简单的jQuery插件，它允许你使用自定义'singleclick'事件来区分单击和双击：
https://github.com/omriyariv/jquery-singleclick
$('#someDiv').on('singleclick', function(e) {
// The event will be fired with a small delay.
console.log('This is certainly a single-click');
}
答案 12 :(得分：1)
如何区分一个元素和相同元素的单击和双击？
如果您不需要混合它们，则可以依靠click和dblclick，每个都可以完成工作。
尝试混合它们时会出现问题： dblclick事件实际上也会触发一个click事件，因此您需要确定单击是否是一次单击。 “独立”单击或双击的一部分。
此外：您不应在同一元素上同时使用click和dblclick ：
建议将处理程序绑定到同一元素的click和dblclick事件。触发事件的顺序因浏览器而异，其中某些事件在dblclick之前收到两个click事件，而其他事件仅收到一个。双击灵敏度（检测为两次单击之间的最长间隔时间）可能因操作系统和浏览器而异，并且通常可由用户配置。
来源：https://api.jquery.com/dblclick/
好消息：
您可以使用事件的detail属性来检测与事件相关的点击次数。这使得click内部的双击非常容易检测。
问题仍然存在于检测单击以及它们是否属于双击的情况。为此，我们返回使用计时器和setTimeout。
使用data属性（避免使用全局变量）将所有内容包装在一起，而无需自己计算点击次数，我们得到：
<div class="clickit" style="font-size: 200%; margin: 2em; padding: 0.25em; background: orange;">Double click me</div>
<div id="log" style="background: #efefef;"></div>
<script>
var clickTimeoutID;
$( document ).ready(function() {
$( '.clickit' ).click( function( event ) {
if ( event.originalEvent.detail === 1 ) {
$( '#log' ).append( '(Event:) Single click event received.<br>' );
/** Is this a true single click or it it a single click that's part of a double click?
* The only way to find out is to wait it for either a specific amount of time or the `dblclick` event.
**/
clickTimeoutID = window.setTimeout(
function() {
$( '#log' ).append( 'USER BEHAVIOR: Single click detected.<br><br>' );
},
500 // how much time users have to perform the second click in a double click -- see accessibility note below.
);
} else if ( event.originalEvent.detail === 2 ) {
$( '#log' ).append( '(Event:) Double click event received.<br>' );
$( '#log' ).append( 'USER BEHAVIOR: Double click detected.<br>' );
window.clearTimeout( clickTimeoutID ); // it's a dblclick, so cancel the single click behavior.
} // triple, quadruple, etc. clicks are ignored.
});
});
</script>
花了一段时间找到令人满意的解决方案，希望对您有所帮助！
答案 13 :(得分：1)
基于 Adrien Schuler （非常感谢您！）的答案，针对Datatables.net和许多用途，这里有一个修改：
功能
/**
* For handle click and single click in child's objects
* @param {any} selector Parents selector, like 'tr'
* @param {any} single_click_callback Callback for single click
* @param {any} double_click_callback Callback for dblclick
* @param {any} timeout Timeout, optional, 300 by default
*/
jQuery.fn.single_double_click = function (selector, single_click_callback, double_click_callback, timeout) {
return this.each(function () {
let clicks = 0;
jQuery(this).on('click', selector, function (event) {
let self = this;
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);
}
});
});
}
使用
$("#MyTableId").single_double_click('tr',
function () { // Click
let row = MyTable.row(this);
let id = row.id();
let data = row.data();
console.log("Click in "+id+" "+data);
},
function () { // DBLClick
let row = MyTable.row(this);
let id = row.id();
let data = row.data();
console.log("DBLClick in "+id+" "+data);
}
);
答案 14 :(得分：0)
我喜欢避免使用jquery（以及其他90-140k库），并且如前所述浏览器首先处理onclick，所以这是我在我创建的网站上所做的（这个例子还包括获取点击的位置本地xy）
clicksNow-0; //global js, owell
function notify2(e, right) { // called from onclick= and oncontextmenu= (rc)
var x,y,xx,yy;
var ele = document.getElementById('wrap');
// offset fixed parent for local win x y
var xxx= ele.offsetLeft;
var yyy= ele.offsetTop;
//NScape
if (document.layers || document.getElementById&&!document.all) {
xx= e.pageX;
yy= e.pageY;
} else {
xx= e.clientX;
yy= e.clientY;
}
x=xx-xxx;
y=yy-yyy;
clicksNow++;
// 200 (2/10ths a sec) is about a low as i seem to be able to go
setTimeout( "processClick( " + right + " , " + x + " , " + y + ")", 200);
}
function processClick(right, x, y) {
if (clicksNow==0) return; // already processed as dblclick
if (clicksNow==2) alert('dbl');
clicksNow=0;
... handle, etc ...
}
希望有所帮助
答案 15 :(得分：0)
这对我有用–
var clicked=0;
function chkBtnClcked(evnt) {
clicked++;
// wait to see if dblclick
if (clicked===1) {
setTimeout(function() {
clicked=0;
.
.
}, 300); // test for another click within 300ms
}
if (clicked===2) {
stopTimer=setInterval(function() {
clicked=0;
.
.
}, 30*1000); // refresh every 30 seconds
}
}
用法–
<div id="cloneimages" style="position: fixed;" onclick="chkBtnClcked(evnt)" title="Click for next pic; double-click for slide show"></div>
答案 16 :(得分：0)
只需发布本机HTML答案，以防万一需要HTML即可。
<p ondblclick="myFunction()" id = 'id'>Double-click me</p>
这当然具有本地Jquery选项。即... $('#id').attr('ondblclick',function(){...})或如前所述，$('#id').dblclick(function(){...});
答案 17 :(得分：0)
我知道这很老，但是下面是一个基本的循环计数器的JS实例，它带有一个计时器来确定单击与双击。希望这对某人有帮助。
var count = 0;
var ele = document.getElementById("my_id");
ele.addEventListener('click', handleSingleDoubleClick, false);
function handleSingleDoubleClick()
{
if(!count) setTimeout(TimerFcn, 400); // 400 ms click delay
count += 1;
}
function TimerFcn()
{
if(count > 1) console.log('you double clicked!')
else console.log('you single clicked')
count = 0;
}
答案 18 :(得分：0)
let clickTimes = 0;
let timer = null;
roundBox.click = function (e) {
clearTimeout(timer);
timer = setTimeout(() => { // 单击事件
console.log("single click");
}, 600);
clickTimes++;
if (clickTimes == 2) { // 双击
clearTimeout(timer);
clickTimes = 0;
console.log("double click");
toggleExpanded(id);
}
}
答案 19 :(得分：0)
试试这个代码
let click = 0;
element.onclick = (event) => {
click++;
console.log(click);
setTimeout(() => {
click = 0;
}, 300);
if (click === 2) {
console.log("double Click");
click = 0;
console.log(click);
}
};