【发布时间】：2011-09-13 21:33:26
【问题描述】：
jquery 中有什么东西可以让我区分双击和单击的行为吗？
当我将两者都绑定到同一个元素时，只会执行单击。
有没有办法在执行单击之前等待一段时间以查看用户是否再次单击？
谢谢:)
【问题讨论】：
【发布时间】：2011-09-13 21:33:26
【问题描述】：
我发现 John Strickler 的回答并不完全符合我的预期。一旦在两秒窗口内再次单击触发警报，随后的每次单击都会触发另一个警报，直到您等待两秒钟后再单击。因此，对于 John 的代码，三次单击相当于两次双击，我希望它的作用类似于双击后单击。
我重新设计了他的解决方案，以这种方式发挥作用，并以一种我的思想可以更好地理解的方式流动。我将延迟从 2000 降低到 700，以更好地模拟我对正常灵敏度的感觉。这是小提琴：http://jsfiddle.net/KpCwN/4/。
感谢您的基金会，约翰。我希望这个替代版本对其他人有用。
var DELAY = 700, clicks = 0, timer = null;
$(function(){
$("a").on("click", function(e){
clicks++; //count clicks
if(clicks === 1) {
timer = setTimeout(function() {
alert("Single Click"); //perform single-click action
clicks = 0; //after action performed, reset counter
}, DELAY);
} else {
clearTimeout(timer); //prevent single-click action
alert("Double Click"); //perform double-click action
clicks = 0; //after action performed, reset counter
}
})
.on("dblclick", function(e){
e.preventDefault(); //cancel system double-click event
});
});
【讨论】：
-
尽管使用 .delegate() 而不是 .live()。
-
现在对这两个都使用
.on() -
使用此方案可将点击事件延迟 700 毫秒！这对用户来说很烦人......
-
@uriel，如果您认为 700 毫秒太长而无法等待双击，只需将数字变小，直到适合您的喜好。
-
从 jQuery 1.7 开始：为了支持稍后加载的内容（ajax 内容），请在第 5 行使用
$("document").on("click","a" function(e){。此构造替换了已弃用的delegate()用法。除了document，您可以/应该在DOM中尽可能使用a的任何父对象，以保持低谷时间。
“Nott Responding”给出的解决方案似乎在双击时触发了两个事件，click 和 dblclick。但是我认为它指向了正确的方向。
我做了一个小改动，结果如下：
$("#clickMe").click(function (e) {
var $this = $(this);
if ($this.hasClass('clicked')){
$this.removeClass('clicked');
alert("Double click");
//here is your code for double click
}else{
$this.addClass('clicked');
setTimeout(function() {
if ($this.hasClass('clicked')){
$this.removeClass('clicked');
alert("Just one click!");
//your code for single click
}
}, 500);
}
});
试试看
【讨论】：
当然，绑定两个处理程序，一个到click，另一个到dblclick。创建一个在每次点击时递增的变量。然后在设定的延迟后重置。在 setTimeout 函数中，你可以做一些事情......
var DELAY = 2000,
clicks = 0,
timer = null;
$('a').bind({
click: function(e) {
clearTimeout(timer);
timer = setTimeout(function() {
clicks = 0;
}, DELAY);
if(clicks === 1) {
alert(clicks);
//do something here
clicks = 0;
}
//Increment clicks
clicks++;
},
dblclick: function(e) {
e.preventDefault(); //don't do anything
}
});
【讨论】：
-
非常感谢。我试图添加 if(clicks==1) 但它不能请你添加单击功能。再次感谢:)
-
@kritya 我编辑了我的答案 - 这应该更适合你。在这里看小提琴 - jsfiddle.net/VfJU4/1
-
OOOOh 我错了，我没有把那个'，'沉迷于dreamweaver，它没有突出显示它：P wtv 谢谢:)
您可以编写自己的 click/dblclick 自定义实现，让它等待额外的点击。我在核心 jQuery 函数中看不到任何可以帮助您实现这一目标的东西。
引用来自 jQuery 网站上的.dblclick()
不建议将处理程序绑定到同一元素的 click 和 dblclick 事件。触发的事件顺序因浏览器而异，有些在 dblclick 之前接收两个点击事件，而另一些只接收一个。双击灵敏度（检测为双击的两次单击之间的最长时间）可能因操作系统和浏览器而异，并且通常可由用户配置。
【讨论】：
看下面的代码
$("#clickMe").click(function (e) {
var $this = $(this);
if ($this.hasClass('clicked')){
alert("Double click");
//here is your code for double click
return;
}else{
$this.addClass('clicked');
//your code for single click
setTimeout(function() {
$this.removeClass('clicked'); },500);
}//end of else
});
【讨论】：
-
我喜欢你添加类并将其用作计数的想法。
-
如果添加 Alert();而不是//您的单击代码根本不起作用
我编写了一个 jQuery 插件，它还允许委托 click 和 dblclick 事件
// jQuery plugin to bind both single and double click to objects
// parameter 'delegateSelector' is optional and allow to delegate the events
// parameter 'dblclickWait' is optional default is 300
(function($) {
$.fn.multipleClicks = function(delegateSelector, clickFun, dblclickFun, dblclickWait) {
var obj;
if (typeof(delegateSelector)==='function' && typeof(clickFun)==='function') {
dblclickWait = dblclickFun; dblclickFun = clickFun; clickFun = delegateSelector; delegateSelector = null; // If 'delegateSelector' is missing reorder arguments
} else if (!(typeof(delegateSelector)==='string' && typeof(clickFun)==='function' && typeof(dblclickFun)==='function')) {
return false;
}
return $(this).each(function() {
$(this).on('click', delegateSelector, function(event) {
var self = this;
clicks = ($(self).data('clicks') || 0)+1;
$(self).data('clicks', clicks);
if (clicks == 1) {
setTimeout(function(){
if ($(self).data('clicks') == 1) {
clickFun.call(self, event); // Single click action
} else {
dblclickFun.call(self, event); // Double click action
}
$(self).data('clicks', 0);
}, dblclickWait || 300);
}
});
});
};
})(jQuery);
【讨论】：
-
这个插件很棒！但不知何故，它似乎在 IE9 中不起作用？我不关心旧版本（现在你不应该再关心 IMO），但我尝试至少在 IE9 上实现功能 - 这是任何人都可以拥有的浏览器（没有操作系统限制）并且具有良好的 JS 支持。跨度>
-
用法：
$("body").multipleClicks('#mySelector', function(){ /* do something on click */},function(){/* do something on doubleclick */},300); -
这个实际上使您能够使用两者——单击和双击——同时进行不同的操作。谢谢！那个就像一个魅力。
这个解决方案适合我
var DELAY = 250, clicks = 0, timer = null;
$(".fc-event").click(function(e) {
if (timer == null) {
timer = setTimeout(function() {
clicks = 0;
timer = null;
// single click code
}, DELAY);
}
if(clicks === 1) {
clearTimeout(timer);
timer = null;
clicks = -1;
// double click code
}
clicks++;
});
【讨论】：
我正在实现这个简单的解决方案，http://jsfiddle.net/533135/VHkLR/5/
html 代码
<p>Click on this paragraph.</p>
<b> </b>
脚本代码
var dbclick=false;
$("p").click(function(){
setTimeout(function(){
if(dbclick ==false){
$("b").html("clicked")
}
},200)
}).dblclick(function(){
dbclick = true
$("b").html("dbclicked")
setTimeout(function(){
dbclick = false
},300)
});
不会太慢
【讨论】：
var singleClickTimer = 0; //define a var to hold timer event in parent scope
jqueryElem.click(function(e){ //using jquery click handler
if (e.detail == 1) { //ensure this is the first click
singleClickTimer = setTimeout(function(){ //create a timer
alert('single'); //run your single click code
},250); //250 or 1/4th second is about right
}
});
jqueryElem.dblclick(function(e){ //using jquery dblclick handler
clearTimeout(singleClickTimer); //cancel the single click
alert('double'); //run your double click code
});
【讨论】：
-
简单有效。 +1
我在这里对上述答案进行了一些更改，效果仍然很好：http://jsfiddle.net/arondraper/R8cDR/
【讨论】：
(function($){
$.click2 = function (elm, o){
this.ao = o;
var DELAY = 700, clicks = 0;
var timer = null;
var self = this;
$(elm).on('click', function(e){
clicks++;
if(clicks === 1){
timer = setTimeout(function(){
self.ao.click(e);
}, DELAY);
} else {
clearTimeout(timer);
self.ao.dblclick(e);
}
}).on('dblclick', function(e){
e.preventDefault();
});
};
$.click2.defaults = { click: function(e){}, dblclick: function(e){} };
$.fn.click2 = function(o){
o = $.extend({},$.click2.defaults, o);
this.each(function(){ new $.click2(this, o); });
return this;
};
})(jQuery);
最后我们使用 as。
$("a").click2({
click : function(e){
var cid = $(this).data('cid');
console.log("Click : "+cid);
},
dblclick : function(e){
var cid = $(this).data('cid');
console.log("Double Click : "+cid);
}
});
【讨论】：
-
$.click 和 $.fn.click 有什么区别？
与上述答案相同，但允许三次点击。 （延迟 500） http://jsfiddle.net/luenwarneke/rV78Y/1/
var DELAY = 500,
clicks = 0,
timer = null;
$(document).ready(function() {
$("a")
.on("click", function(e){
clicks++; //count clicks
timer = setTimeout(function() {
if(clicks === 1) {
alert('Single Click'); //perform single-click action
} else if(clicks === 2) {
alert('Double Click'); //perform single-click action
} else if(clicks >= 3) {
alert('Triple Click'); //perform Triple-click action
}
clearTimeout(timer);
clicks = 0; //after action performed, reset counter
}, DELAY);
})
.on("dblclick", function(e){
e.preventDefault(); //cancel system double-click event
});
});
【讨论】：
这是一种您可以使用基本 JavaScript 执行的方法，它适用于我：
var v_Result;
function OneClick() {
v_Result = false;
window.setTimeout(OneClick_Nei, 500)
function OneClick_Nei() {
if (v_Result != false) return;
alert("single click");
}
}
function TwoClick() {
v_Result = true;
alert("double click");
}
【讨论】：
下面是我解决这个问题的简单方法。
jQuery函数：
jQuery.fn.trackClicks = function () {
if ($(this).attr("data-clicks") === undefined) $(this).attr("data-clicks", 0);
var timer;
$(this).click(function () {
$(this).attr("data-clicks", parseInt($(this).attr("data-clicks")) + 1);
if (timer) clearTimeout(timer);
var item = $(this);
timer = setTimeout(function() {
item.attr("data-clicks", 0);
}, 1000);
});
}
实施：
$(function () {
$("a").trackClicks();
$("a").click(function () {
if ($(this).attr("data-clicks") === "2") {
// Double clicked
}
});
});
在 Firefox/Chrome 中检查 clicked 元素，查看点击时数据点击次数的上升和下降，调整时间 (1000) 以适应。
【讨论】：
如果你不想创建单独的变量来管理状态，你可以查看这个答案https://stackoverflow.com/a/65620562/4437468
【讨论】：