我有一个这样的按钮：
<input type="submit" id="submit" value="Save" />
在 jQuery 中，我使用以下内容，但它仍然允许双击：
<script type="text/javascript">
$(document).ready(function () {
$("#submit").one('click', function (event) {
知道如何防止双击吗？
【问题讨论】：
标签： jquery double-click
jQuery 的one() 将为每个绑定的元素触发一次附加的事件处理程序，然后删除事件处理程序。
如果由于某种原因不符合要求，也可以在单击按钮后完全禁用该按钮。
$(document).ready(function () {
$("#submit").one('click', function (event) {
event.preventDefault();
//do something
$(this).prop('disabled', true);
});
});
应注意，使用 ID submit 可能会导致问题，因为它会使用对该元素的引用覆盖 form.submit 函数。
【讨论】：
one() 不适用于 Windows 最终用户...
还有一个解决方案：
$('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秒前），则更新最后一次点击时间，如果为真，做点什么。
【讨论】：
我发现大多数解决方案都不适用于点击标签或 DIV 等元素（例如，使用 Kendo 控件时）。所以我做了这个简单的解决方案：
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...
});
【讨论】：
我的解决方案：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 one 有一些副作用（在 IE8 中），我最终使用了以下内容：
$(document).ready(function(){
$("*").dblclick(function(e){
e.preventDefault();
});
});
效果很好，看起来更简单。在那里找到它：http://www.jquerybyexample.net/2013/01/disable-mouse-double-click-using-javascript-or-jquery.html
【讨论】：
只需将此方法放入您的表单中，它就会一次处理双击或多次单击。一旦请求发送，它将不允许一次又一次地发送请求。
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function() {
$(this).submit(function() {
return false;
});
return true;
});
});
</script>
它肯定会帮助你。
【讨论】：
“简单易学”
$(function() {
$('.targetClass').dblclick(false);
});
【讨论】：
我有类似的问题。您可以使用 setTimeout() 来避免双击。
//some codes here above after the click then disable it
// 也检查这里是否有一个属性被禁用
// 如果 btn 标签中有一个属性被禁用，那么 // 返回。将其转换为 js。
$('#btn1').prop("disabled", true);
setTimeout(function(){
$('#btn1').prop("disabled", false);
}, 300);
【讨论】：
我发现在现代浏览器上是旧的但有效的解决方案。适用于在双击时不切换类。
$('*').click(function(event) {
if(!event.detail || event.detail==1){//activate on first click only to avoid hiding again on double clicks
// Toggle classes and do functions here
$(this).slideToggle();
}
});
【讨论】：
/*
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 提供的解决方案几乎对我有用。我确实必须添加 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();
}
});
【讨论】：
这是我的第一篇文章，我非常缺乏经验，所以请放轻松，但我觉得我有一个有效的贡献，可能对某人有帮助......
有时您在重复点击之间需要一个非常大的时间窗口（例如，一个 mailto 链接，其中电子邮件应用程序需要几秒钟才能打开并且您不希望它重新触发），但您不希望在其他地方减慢用户的速度。我的解决方案是根据事件类型为链接使用类名，同时在其他地方保留双击功能......
var controlspeed = 0;
$(document).on('click','a',function (event) {
eventtype = this.className;
controlspeed ++;
if (eventtype == "eg-class01") {
speedlimit = 3000;
} else if (eventtype == "eg-class02") {
speedlimit = 500;
} else {
speedlimit = 0;
}
setTimeout(function() {
controlspeed = 0;
},speedlimit);
if (controlspeed > 1) {
event.preventDefault();
return;
} else {
(usual onclick code goes here)
}
});
【讨论】：
当加载具有相同表单的新页面时，您可以执行以下操作来禁用提交按钮：
$("#btnConfirm").bind("click", function (e) {
$("#btnConfirm ").css("pointer-events", "none");
});
提交按钮可能如下所示：
<input
type="submit"
name="ACMS_POST_Form_Confirm"
value="confirm"
id="btnConfirm"
/>
【讨论】：
我遇到了类似的问题，但禁用按钮并没有完全解决问题。在单击按钮时发生了一些其他操作，有时，按钮没有很快被禁用，当用户双击时，触发了 2 个事件。
我采用了 Pangui 的超时想法，并结合了这两种技术，禁用按钮并包括超时，以防万一。我创建了一个简单的 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);
})
【讨论】：
如果您真正想要的是避免多次提交表单，而不仅仅是防止双击，如果存在客户端验证（例如标记为必需的文本字段），则在按钮的单击事件上使用 jQuery one() 可能会出现问题.这是因为单击会触发客户端验证，如果验证失败，您将无法再次使用该按钮。为了避免这种情况，one() 仍然可以直接用于表单的提交事件。这是我找到的最干净的基于 jQuery 的解决方案：
<script type="text/javascript">
$("#my-signup-form").one("submit", function() {
// Just disable the button.
// There will be only one form submission.
$("#my-signup-btn").prop("disabled", true);
});
</script>
【讨论】：
我能够通过以下方式有效地完成这项任务
一旦调用按钮单击处理程序，就禁用按钮
做需要做的必要操作。
使用 SetTimeout 几秒钟后将 disabled 属性设置回 false
$('#btn1).click(function(e){
$('#btn1').prop("disabled", true);
setTimeout(()=>{
$('#btn1').prop("disabled", false);
},2000)
这应该可以解决问题。
【讨论】：