jquery - 如何使用jQuery防止双击？

Question

我有一个这样的按钮：

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

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

<script type="text/javascript">

$(document).ready(function () {

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

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

Answer 1

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

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

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

应该注意的是，使用 ID可能会导致问题，因为它会使用对该元素的引用submit覆盖函数。form.submit

Answer 2

还有一种解决方案：

$('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

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

Answer 4

我的解决方案：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;
}; 

Answer 5

就我而言，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

Answer 6

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

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

它肯定会帮助你。

Answer 7

“十分简单”

$(function() {
     $('.targetClass').dblclick(false);
});

Answer 8

我有类似的问题。您可以使用 setTimeout() 来避免双击。

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

// 还要检查这里是否有一个属性被禁用

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

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

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

Answer 9

我发现在现代浏览器上是旧的但有效的解决方案。适用于在双击时不切换类。

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

Answer 10

/*
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
}

});

Answer 11

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

Answer 12

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

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

    }
});

Answer 13

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

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

提交按钮可能如下所示：

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

Answer 14

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

Answer 15

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

Answer 16

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

1. 一旦调用按钮单击处理程序，就禁用按钮

2. 做需要做的必要操作。

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

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

这应该可以解决问题。