如何使用jQuery防止双击？

我有一个按钮：

<input type="submit" id="submit" value="Save" />

在jQuery中，我使用了以下内容，但它仍然允许双击：

<script type="text/javascript">

$(document).ready(function () {

    $("#submit").one('click', function (event) {  

$（文档）.ready（函数（）{
$（“#提交”）.one（'click'，函数（事件）{

有没有关于如何防止双击的想法？

jQuery将为每个绑定的元素触发附加的事件处理程序一次，然后删除事件处理程序

如果由于某种原因不能满足要求，也可以在单击按钮后完全禁用该按钮

$(document).ready(function () {
     $("#submit").one('click', function (event) {  
           event.preventDefault();
           //do something
           $(this).prop('disabled', true);
     });
});

---

需要注意的是，使用ID

submit

会导致问题，因为它会覆盖

表单。submit

函数引用该元素。

在我的例子中，jQuery one有一些副作用（在IE8中），我最终使用了以下方法：

$(document).ready(function(){
  $("*").dblclick(function(e){
    e.preventDefault();
  });
});

它工作得很好，看起来也很简单。在那里找到了：

我的解决方案：它可以防止双击，但在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;
}; 

---

还有一个解决方案：

$('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());
});

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;
}

在这里，我们将上次单击的时间保存为数据属性，然后检查上次单击是否超过0.3秒。如果为false（不到0.3秒），只需更新上次单击时间，如果为true，请执行某些操作

---

我也有类似的问题，但禁用按钮并不能完全解决问题。单击按钮时会发生一些其他操作，有时按钮没有很快禁用，当用户双击时，会触发两个事件。
我采用了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);
})

<input
    type="submit"
    name="ACMS_POST_Form_Confirm"
    value="confirm"
    id="btnConfirm"
/>

---

我也有类似的问题。您可以使用setTimeout（）来避免双击

//some codes here above after the click then disable it

//如果有一个属性被禁用，也在这里检查

//如果btn标记中有禁用的属性，则 //返回。将其转换为js

$('#btn1').prop("disabled", true);

setTimeout(function(){
    $('#btn1').prop("disabled", false);
}, 300);

---

我发现大多数解决方案都不适用于单击标签或DIV之类的元素（例如，在使用剑道控件时）。因此我提出了一个简单的解决方案：

$('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());
});

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...
});

---

@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();
    }
});

---

只需将此方法放入表单中，它就会处理一次双击或多次单击。一旦请求发送，它将不允许一次又一次地发送请求

<script type="text/javascript">
    $(document).ready(function(){
            $("form").submit(function() {
                $(this).submit(function() {
                    return false;
                });
                return true;
            }); 
    }); 
</script>

$（文档）.ready（函数（）{
$（“表格”）。提交（函数（）{
$（this）.submit（函数（）{
返回false；
});
返回true；
}); 
}); 

---

这肯定会对您有所帮助。

我发现这是一个古老但在现代浏览器上仍能正常工作的解决方案。适用于不在双击时切换类

$('*').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();
    }
});

“轻松豌豆”

---

这是我的第一篇帖子&我非常缺乏经验，所以请对我放松，但我觉得我有一个有效的贡献，可能会对某人有所帮助

有时你需要在重复点击之间有一个很大的时间窗口（例如，一个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)

    }
});

---

如果您真正想要的是避免多个表单提交，而不仅仅是防止双击，那么如果存在客户端验证（例如标记为必需的文本字段），则在按钮的单击事件上使用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>

$（“#我的报名表”）.1（“提交”，函数（）{
//只需禁用按钮。
//将只提交一份表格。
$（“#我的注册btn”）.prop（“禁用”，true）；
});

加载具有相同表单的新页面时，您可以执行类似操作以禁用“提交”按钮：

$("#btnConfirm").bind("click", function (e) {
  $("#btnConfirm ").css("pointer-events", "none");
});

“提交”按钮可能如下所示：

$("#button1").singleClick(function () {
   $(this).prop('disabled', true);
   //...
   $(this).prop('disabled', false);
})

<input
    type="submit"
    name="ACMS_POST_Form_Confirm"
    value="confirm"
    id="btnConfirm"
/>

---

我能够通过以下方式有效地完成这项任务

一旦调用按钮单击处理程序，请禁用按钮

执行需要执行的必要操作

几秒钟后，使用SetTimeout将disabled属性设置回false

 $('#btn1).click(function(e){
 $('#btn1').prop("disabled", true);

 setTimeout(()=>{
 $('#btn1').prop("disabled", false);
 },2000)

---

这应该可以解决问题。

这是一个按钮，您可以按任意次数单击它。只需阻止默认操作或在第一次单击后将其禁用即可。同意adeneo。最简单的解决方案似乎是在单击后将其禁用。如果禁用，它将不会发回！只允许单击一次！您有任何解决方案，以便一次点击必须发生，直到完成完整的表单处理。一次点击对我想要完成的事情没有帮助，对吗？我们需要使用禁用的按钮，它才能真正工作。不，一次（）工作正常，它只运行绑定功能一次，但由于它是一个常规按钮，您可以单击它直到手指受伤。唯一停止它的方法是，如上所述禁用它，或者阻止默认发送表单，这样按钮就不会做任何事，您无论如何都应该这样做，否则页面将重新加载，所有javascript功能ns将重新开始，并且这些解决方案无论如何都不起作用。如果禁用！则该按钮不会回发！您是否有任何解决方案，以便只需单击一次，直到完整表单处理完成？在我的情况下，它可以工作，因为我在提交后已刷新页面！其他人应记住，单击一次后该按钮将没有任何用处像

one（）

这样的书不适用于Windows终端