如何防止使用jQuery双击？
我有一个button，
<input type="submit" id="submit" value="Save" /> 在jQuery中，我正在使用以下，但它仍然允许双击：
<script type="text/javascript"> $(document).ready(function () { $("#submit").one('click', function (event) {
任何想法如何我可以防止双击？
jQuery的one（）将触发附加的事件处理程序绑定每个元素一次，然后删除事件处理程序。
如果由于某些原因不能满足要求，也可以在点击button后完全禁用button。
$(document).ready(function () { $("#submit").one('click', function (event) { event.preventDefault(); //do something $(this).prop('disabled', true); }); });
应该指出，使用ID submit可能会导致问题，因为它会覆盖form.submit函数并引用该元素。
再一个解决scheme：
$('a').on('click', function(e){ var $link = $(e.target); e.preventDefault(); if(!$link.data('lockedAt') || +new Date() - $link.data('lockedAt') > 300) { doSomething(); } $link.data('lockedAt', +new Date()); });
在这里，我们将最后一次点击的时间保存为数据属性，然后检查之前的点击是否超过0.3秒。 如果它是假的（不到0.3秒前），只需更新最后一次点击时间，如果是的话，就做点什么。
jsbin
我的解决scheme： https ： //gist.github.com/pangui/86b5e0610b53ddf28f94它防止双击，但1秒后接受更多的点击。 希望能帮助到你。
这里是代码：
jQuery.fn.preventDoubleClick = function() { $(this).on('click', function(e){ var $el = $(this); if($el.data('clicked')){ // Previously clicked, stop actions e.preventDefault(); e.stopPropagation(); }else{ // Mark to ignore next click $el.data('clicked', true); // Unmark after 1 second window.setTimeout(function(){ $el.removeData('clicked'); }, 1000) } }); return this; };
就我而言，jQuery有一些副作用（在IE8中），我最终使用了以下内容：
$(document).ready(function(){ $("*").dblclick(function(e){ e.preventDefault(); }); });
这工作非常好，看起来更简单。 在那里find它： http : //www.jquerybyexample.net/2013/01/disable-mouse-double-click-using-javascript-or-jquery.html
我发现大多数解决scheme都不适用于点击标签或DIV元素（例如使用Kendo控件时）。 所以我做了这个简单的解决scheme
function isDoubleClicked(element) { //if already clicked return TRUE to indicate this click is not allowed if (element.data("isclicked")) return true; //mark as clicked for 1 second element.data("isclicked", true); setTimeout(function () { element.removeData("isclicked"); }, 1000); //return FALSE to indicate this click was allowed return false; }
在您决定开始活动的地方使用它：
$('#button').on("click", function () { if (isDoubleClicked($(this))) return; ..continue... });
我有类似的问题。 你可以使用setTimeout（）来避免双击。
//some codes here above after the click then disable it
//如果有一个属性被禁用，也在这里检查
//如果在btn标签中有一个禁用的属性，那么//返回。 转换成js。
$('#btn1').prop("disabled", true); setTimeout(function(){ $('#btn1').prop("disabled", false); }, 300);
只要把这个方法放在你的表单中，那么它会一次处理双击或多点击。 一旦请求发送它将不允许发送一次又一次的请求。
<script type="text/javascript"> $(document).ready(function(){ $("form").submit(function() { $(this).submit(function() { return false; }); return true; }); }); </script>
这将有助于你的确定。
我有一个类似的问题，但禁用button并没有完全做到这一点。 还有一些其他的操作发生在button被点击时，有时候，button没有被closures的时间不够快，当用户双击时，发生了2个事件。
我拿了Pangui的超时的想法，并结合了两种技术，禁用button，并包含一个超时，以防万一。 我创build了一个简单的jQuery插件：
var SINGLECLICK_CLICKED = 'singleClickClicked'; $.fn.singleClick = function () { var fncHandler; var eventData; var fncSingleClick = function (ev) { var $this = $(this); if (($this.data(SINGLECLICK_CLICKED)) || ($this.prop('disabled'))) { ev.preventDefault(); ev.stopPropagation(); } else { $this.data(SINGLECLICK_CLICKED, true); window.setTimeout(function () { $this.removeData(SINGLECLICK_CLICKED); }, 1500); if ($.isFunction(fncHandler)) { fncHandler.apply(this, arguments); } } } switch (arguments.length) { case 0: return this.click(); case 1: fncHandler = arguments[0]; this.click(fncSingleClick); break; case 2: eventData = arguments[0]; fncHandler = arguments[1]; this.click(eventData, fncSingleClick); break; } return this; }
然后像这样使用它：
$("#button1").singleClick(function () { $(this).prop('disabled', true); //... $(this).prop('disabled', false); })
/* Double click behaves as one single click "It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable." That way we have to check what is the event that is being executed at any sequence. */ var totalClicks = 1; $('#elementId').on('click dblclick', function (e) { if (e.type == "dblclick") { console.log("e.type1: " + e.type); return; } else if (e.type == "click") { if (totalClicks > 1) { console.log("e.type2: " + e.type); totalClicks = 1; return; } else { console.log("e.type3: " + e.type); ++totalClicks; } //execute the code you want to execute } });
@ Kichrum提供的解决scheme几乎为我工作。 我不得不添加e.stopImmediatePropagation（）以防止默认的操作。 这是我的代码：
$('a, button').on('click', function (e) { var $link = $(e.target); if (!$link.data('lockedAt')) { $link.data('lockedAt', +new Date()); } else if (+new Date() - $link.data('lockedAt') > 500) { $link.data('lockedAt', +new Date()); } else { e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); } });
