如何使用 jQuery 防止双击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11621652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent a double-click using jQuery?
提问by Nate Pet
I have a button as such:
我有一个这样的按钮：
<input type="submit" id="submit" value="Save" />
Within jQuery I am using the following, but it still allows for double-clicks:
在 jQuery 中，我使用了以下内容，但它仍然允许双击：
<script type="text/javascript">
$(document).ready(function () {
$("#submit").one('click', function (event) {
Any idea on how I can prevent double-click?
关于如何防止双击的任何想法？
回答by adeneo
jQuery's one()will fire the attached event handler once for each element bound, and then remove the event handler.
jQuery 的one()将为每个绑定的元素触发一次附加的事件处理程序，然后删除事件处理程序。
If for some reason that doesn't fulfill the requirements, one could also disable the button entirely after it has been clicked.
如果由于某种原因不满足要求，也可以在单击按钮后完全禁用该按钮。
$(document).ready(function () {
$("#submit").one('click', function (event) {
event.preventDefault();
//do something
$(this).prop('disabled', true);
});
});
It should be noted that using the ID submitcan cause issues, as it overwrites the form.submitfunction with a reference to that element.
应该注意的是，使用 IDsubmit可能会导致问题，因为它会使用form.submit对该元素的引用覆盖函数。
回答by Kichrum
Just one more solution:
还有一种解决方案：
$('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());
});
Here we save the time of last click as data attribute and then check if previous click was more than 0.3 seconds ago. If it is false (less than 0.3 sec ago), just update last click time, if true, do something.
这里我们将上次点击的时间保存为数据属性，然后检查上次点击是否超过 0.3 秒前。如果它是假的（小于 0.3 秒前），只更新最后一次点击时间，如果是真的，做一些事情。
回答by roberth
I found that most solutions didn't work with clicks on elements like Labels or DIV's (eg. when using Kendo controls). So I made this simple solution:
我发现大多数解决方案都不适用于点击标签或 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;
}
Use it on the place where you have to decide to start an event or not:
在您必须决定是否开始活动的地方使用它：
$('#button').on("click", function () {
if (isDoubleClicked($(this))) return;
..continue...
});
回答by Pangui
My solution: https://gist.github.com/pangui/86b5e0610b53ddf28f94It prevents double click but accepts more clicks after 1 second. Hope it helps.
我的解决方案：https: //gist.github.com/pangui/86b5e0610b53ddf28f94它可以防止双击但在 1 秒后接受更多点击。希望能帮助到你。
Here is the code:
这是代码：
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;
};
回答by Etienne
In my case, jQuery one had some side effects (in IE8) and I ended up using the following :
就我而言，jQuery 有一些副作用（在 IE8 中），我最终使用了以下内容：
$(document).ready(function(){
$("*").dblclick(function(e){
e.preventDefault();
});
});
which works very nicely and looks simpler. Found it there: http://www.jquerybyexample.net/2013/01/disable-mouse-double-click-using-javascript-or-jquery.html
效果很好，看起来更简单。在那里找到它：http: //www.jquerybyexample.net/2013/01/disable-mouse-double-click-using-javascript-or-jquery.html
回答by Bachas
just put this method in your forms then it will handle double-click or more clicks in once. once request send it will not allow sending again and again request.
只需将此方法放入您的表单中，它就会一次性处理双击或多次点击。一旦请求发送，它将不允许一次又一次地发送请求。
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function() {
$(this).submit(function() {
return false;
});
return true;
});
});
</script>
it will help you for sure.
它肯定会帮助你。
回答by Kabindas
"Easy Peasy"
“十分简单”
$(function() {
$('.targetClass').dblclick(false);
});
回答by Tadas Stasiulionis
What I found out was old but working solution on modern browsers. Works for not toggling classes on the double click.
我发现的是旧的但在现代浏览器上有效的解决方案。适用于在双击时不切换类。
$('*').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();
}
});
回答by user3856437
I have the similar issue. You can use setTimeout() to avoid the double-click.
我有类似的问题。您可以使用 setTimeout() 来避免双击。
//some codes here above after the click then disable it
// also check here if there's an attribute disabled
// 也在这里检查是否有一个属性被禁用
// if there's an attribute disabled in the btn tag then // return. Convert that into js.
// 如果 btn 标记中禁用了一个属性，则 // 返回。将其转换为 js。
$('#btn1').prop("disabled", true);
setTimeout(function(){
$('#btn1').prop("disabled", false);
}, 300);
回答by ma5k
This is my first ever post & I'm very inexperienced so please go easy on me, but I feel I've got a valid contribution that may be helpful to someone...
这是我第一次发帖，我非常缺乏经验，所以请放轻松，但我觉得我有一个有效的贡献，可能对某人有帮助......
Sometimes you need a very big time window between repeat clicks (eg a mailto link where it takes a couple of secs for the email app to open and you don't want it re-triggered), yet you don't want to slow the user down elsewhere. My solution is to use class names for the links depending on event type, while retaining double-click functionality elsewhere...
有时您在重复点击之间需要一个非常大的时间窗口（例如 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)
}
});
