jquery分别绑定双击和单击
jQuery中有什么东西可以让我区分双击和单击行为吗？
当我绑定到相同的元素只有一次点击得到执行。
有没有一种方法，等待一段时间才执行单击，看看用户是否再次点击？
谢谢 ：）
我发现约翰斯特里克勒的回答并不完全符合我的期望。 一旦警报在两秒钟的时间内被第二次点击触发，每次后续点击都会触发另一个警报，直到您等待两秒钟再次单击。 所以对于John的代码来说，三重点击就像双击一样，我希望它能像双击一样，然后点击一下。
我已经改变了他的解决scheme，以这种方式运作，并以我的思维能够更好地理解的方式stream动。 我把这个延迟从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 }); }); 当然，绑定两个处理程序，一个click ，另一个click 。 创build一个variables，每增加一次点击。 然后在设定的延迟之后重置。 在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 } });
从“Nott Responding”给出的解决scheme似乎触发了这两个事件，双击时点击和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自定义实现，让它等待额外的点击。 我没有看到核心jQuery的function，可以帮助你实现这一目标。
从jQuery站点的.dblclick（）引用
将处理程序绑定到同一元素的click和dblclick事件是不可取的。 触发事件的顺序因浏览器而异，其中一些在dblclick之前接收到两个点击事件，而另一些事件则只有一个发生。 双击灵敏度（双击检测到的最大点击时间）可能因操作系统和浏览器而异，并且通常是用户可configuration的。
看下面的代码
$("#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 });
我写了一个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);
这个解决scheme适用于我
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++; });
我正在实施这个简单的解决scheme， 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 });
我对上面的答案做了一些改变，仍然很好： 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); } });
与上面的答案相同，但允许三击。 （延迟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浏览器中点击的元素查看数据点击，调整时间（1000）以适应。
