我有一个按钮：
<input type="submit" id="submit" value="Save" />
在jQuery中我使用以下内容，但它仍然允许双击：
<script type="text/javascript">
$(document).ready(function () {
$("#submit").one('click', function (event) {
有关如何防止双击的任何想法？
jQuery的one()将为每个绑定的元素触发附加的事件处理程序，然后删除事件处理程序。
如果由于某些原因不符合要求，也可以在点击后完全禁用该按钮。
$(document).ready(function () {
$("#submit").one('click', function (event) {
event.preventDefault();
//do something
$(this).prop('disabled', true);
});
});
应该注意的是，使用ID submit会导致问题，因为它会覆盖form.submit函数并引用该元素。
/*
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
}
});
这是我的第一篇文章，我很缺乏经验，所以请放轻松我，但我觉得我有一个可能对某人有帮助的有效贡献......
有时你需要在重复点击之间有一个非常大的时间窗口（例如，一个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)
}
});
我有一个类似的问题，但禁用按钮并没有完全成功。单击按钮时发生了一些其他操作，有时，按钮未被足够快地禁用，当用户双击时，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);
})
@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();
}
});
如果您真正想要的是避免多个表单提交，而不仅仅是防止双击，那么如果有客户端验证（例如标记为必需的文本字段），则在按钮的单击事件上使用jQuery one（）可能会出现问题。这是因为click会触发客户端验证，如果验证失败，则无法再次使用该按钮。为了避免这种情况，one（）仍然可以直接在表单的submit事件中使用。这是我发现的最干净的基于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>
还有一个解决方案：
$('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有一些副作用（在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();
}
});