jquery分别绑定双击和单击
Posted
技术标签:
【中文标题】jquery分别绑定双击和单击【英文标题】：Jquery bind double click and single click separately 【发布时间】：2011-09-13 21:33:26 【问题描述】：jquery 中有什么东西可以让我区分双击和单击的行为吗？
当我将两者都绑定到同一个元素时，只会执行单击。
有没有办法在执行单击之前等待一段时间以查看用户是否再次单击？
谢谢:)
【问题讨论】：
***.com/questions/1472433/… 【参考方案1】：我发现 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的任何父对象，以保持低谷时间。【参考方案2】：
“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);
);
试试看
http://jsfiddle.net/calterras/xmmo3esg/
【讨论】：
【参考方案3】：当然，绑定两个处理程序，一个到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 谢谢:)【参考方案4】：您可以编写自己的 click/dblclick 自定义实现，让它等待额外的点击。我在核心 jQuery 函数中看不到任何可以帮助您实现这一目标的东西。
引用来自 jQuery 网站上的.dblclick()
不建议将处理程序绑定到同一元素的 click 和 dblclick 事件。触发的事件顺序因浏览器而异，有些在 dblclick 之前接收两个点击事件，而另一些只接收一个。双击灵敏度（检测为双击的两次单击之间的最长时间）可能因操作系统和浏览器而异，并且通常可由用户配置。
【讨论】：
【参考方案5】：看下面的代码
$("#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
);
演示在这里http://jsfiddle.net/cB484/
【讨论】：
我喜欢你添加类并将其用作计数的想法。 如果添加 Alert();而不是//您的单击代码根本不起作用【参考方案6】：我编写了一个 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);
这个实际上使您能够使用两者——单击和双击——同时进行不同的操作。谢谢！那个就像一个魅力。【参考方案7】：
这个解决方案适合我
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++;
);
【讨论】：
【参考方案8】：我正在实现这个简单的解决方案，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)
);
不会太慢
【讨论】：
【参考方案9】：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【参考方案10】：我在这里对上述答案进行了一些更改，效果仍然很好：http://jsfiddle.net/arondraper/R8cDR/
【讨论】：
【参考方案11】：(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 有什么区别？【参考方案12】：与上述答案相同，但允许三次点击。 （延迟 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
);
);
【讨论】：
【参考方案13】：这是一种您可以使用基本 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");
【讨论】：
【参考方案14】：下面是我解决这个问题的简单方法。
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) 以适应。
【讨论】：
【参考方案15】：如果你不想创建单独的变量来管理状态，你可以查看这个答案https://***.com/a/65620562/4437468
【讨论】：
以上是关于jquery分别绑定双击和单击的主要内容，如果未能解决你的问题，请参考以下文章