如何在 jQuery 中临时禁用点击处理程序？

Question

假设我有类似下面的东西来捕获按钮的点击事件：

$("#button_id").click(function() {
  //disable click event
  //do something
  //re-enable click event
}

如何暂时禁用按钮的点击事件，直到原始点击的处理结束发生？我基本上在单击按钮后让 div 消失，但是如果用户快速单击按钮几次，它会在 div 有机会消失之前处理所有这些单击。我想“去抖动”按钮，以便在 div 消失之前只注册第一次点击。

Answer 1

我注意到这篇文章很旧，但它似乎在谷歌上排名靠前，并且从未提供过这种解决方案，所以我还是决定发布它。

您可以禁用光标事件并稍后通过 css 再次启用它们。它在所有主要浏览器上都受支持，并且在某些情况下可能会很有用。

$("#button_id").click(function() {

   $("#button_id").css("pointer-events", "none");
   //do something
   $("#button_id").css("pointer-events", "auto");
}

Answer 2

这是人工状态变量解决方案的更惯用的替代方案：

$("#button_id").one('click', DoSomething);

function DoSomething() {
  // do something.

  $("#button_id").one('click', DoSomething);
}

一个只会执行一次（直到再次附加）。更多信息在这里：http://docs.jquery.com/Events/one

Answer 3

$("#button_id").click(function() {
  if($(this).data('dont')==1) return;
  $(this).data('dont',1);
  //do something
  $(this).data('dont',0);
}

请记住，$.data() 仅适用于具有 ID 的项目。

Answer 4

您可以使用.off 取消绑定您的处理程序，但有一个警告；如果你这样做只是为了防止处理程序在它已经运行时再次被触发，你需要推迟重新绑定处理程序。

例如，考虑这段代码，它使用 5 秒的热睡眠来模拟在处理程序内完成的同步和计算成本高昂的事情（比如繁重的 DOM 操作）：

<button id="foo">Click Me!</div>
<script>
    function waitForFiveSeconds() {
        var startTime = new Date();
        while (new Date() - startTime < 5000) {}
    }
    $('#foo').click(function handler() {
        // BAD CODE, DON'T COPY AND PASTE ME!
        $('#foo').off('click');
        console.log('Hello, World!');
        waitForFiveSeconds();
        $('#foo').click(handler);
    });
</script>

这行不通。正如您在this JSFiddle 中尝试的那样，如果您在处理程序已经执行时单击按钮，则处理程序将在第一次执行完成后再次执行。更重要的是，至少在 Chrome 和 Firefox 中，即使您不使用 jQuery 而是使用 addEventListener 和 removeEventListener 添加和删除处理程序也是如此。浏览器在第一次单击后执行处理程序，解除绑定和重新绑定处理程序，然后处理第二次单击并检查是否有单击处理程序要执行。

要解决这个问题，您需要使用setTimeout 推迟处理程序的重新绑定，以便在第一个处理程序执行时发生的点击将在您重新附加处理程序之前处理。 p>

<button id="foo">Click Me!</div>
<script>
    function waitForFiveSeconds() {
        var startTime = new Date();
        while (new Date() - startTime < 5000) {}
    }
    $('#foo').click(function handler() {
        $('#foo').off('click');
        console.log('Hello, World!');
        waitForFiveSeconds();

        // Defer rebinding the handler, so that any clicks that happened while
        // it was unbound get processed first.
        setTimeout(function () {
            $('#foo').click(handler);
        }, 0);
    });
</script>

您可以在 this modified JSFiddle 看到这一点。

当然，如果您在处理程序中执行的操作已经是异步的，则这是不必要的，因为您已经将控制权交给了浏览器，并在重新绑定处理程序之前让它刷新所有点击事件。例如，这样的代码在没有setTimeout 调用的情况下也能正常工作：

<button id="foo">Save Stuff</div>
<script>
    $('#foo').click(function handler() {
        $('#foo').off('click');
        $.post( "/some_api/save_stuff", function() {
            $('#foo').click(handler);
        });
    });
</script>

Answer 5

你可以像我之前告诉你的其他人一样使用外观：

A.) 使用按钮元素的 .data 来共享外观变量（或只是全局变量）

if ($('#buttonId').data('locked') == 1)
    return
$('#buttonId').data('locked') = 1;
// Do your thing
$('#buttonId').data('locked') = 0;

B.) 禁用鼠标信号

$("#buttonId").css("pointer-events", "none");
// Do your thing
$("#buttonId").css("pointer-events", "auto");

C.) 如果是 HTML 按钮，您可以禁用它（输入 [type=submit] 或按钮）

$("#buttonId").attr("disabled", "true");
// Do your thing
$("#buttonId").attr("disabled", "false");

但要注意其他线程！我失败了很多次，因为我的动画（淡入或淡出）花了一秒钟。 例如。 fadeIn/fadeOut 支持回调函数作为第二个参数。 如果没有其他方法，请使用setTimeout(callback, delay)。

您好， 托马斯

Answer 6

如果#button_id 暗示一个标准的 HTML 按钮（如提交按钮），您可以使用 'disabled' 属性使按钮对浏览器无效。

$("#button_id").click(function() {
    $('#button_id').attr('disabled', 'true');

    //do something

     $('#button_id').removeAttr('disabled');
});   

但是，您可能需要注意的是这些事情发生的顺序。如果您使用 jquery hide 命令，您可能需要包含“$('#button_id').removeAttr('disabled');”作为回调的一部分，以便在隐藏完成之前不会发生。

[edit] 使用回调的函数示例：

$("#button_id").click(function() {
    $('#button_id').attr('disabled', 'true');
    $('#myDiv').hide(function() { $('#button_id').removeAttr('disabled'); });
});   

Answer 7

尝试使用.one()

var button = $("#button"),
  result = $("#result"),
  buttonHandler = function buttonHandler(e) {
    result.html("processing...");
    $(this).fadeOut(1000, function() {
      // do stuff
      setTimeout(function() {
        // reset `click` event at `button`
        button.fadeIn({
          duration: 500,
          start: function() {
            result.html("done at " + $.now());
          }
        }).one("click", buttonHandler);

      }, 5000)
    })
  };

button.one("click", buttonHandler);

#button {
  width: 50px;
  height: 50px;
  background: olive;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="result"></div>
<div id="button">click</div>

Answer 8

最好使用当前事件并且不要在全局处理程序中保存处理程序。 我得到当前元素事件然后解除绑定然后再次绑定。 对于处理程序。

var element =  $("#elemid")[0];
var tempHandler = jQuery._data(element)["events"]["click"][0].handler;
$("#elemid").unbind("click");

// do the job that click not suppose to listen;
$("#elemid").bind("click" , tempHandler );

所有处理程序

var element =  $("#elemid")[0];
var clickHandlerList = jQuery._data(element)["events"]["click"];
var handlerList = [];
for(var i  = 0 ; i <  clickHandlerList .length ; i++) {
    handlerList .push(clickHandlerList [i].handler);
}
$("#elemid").unbind("click");
// do the job that click not suppose to listen;
for(var i  = 0 ; i <  handlerList.length ; i++) {
    // return back all handler to element.
    $("#elemid").bind("click" , handlerList[i]);
}

Answer 9

我在等待函数完成时尝试显示加载微调器时几乎没有遇到这个问题。因为我将微调器附加到 HTML 中，所以每次单击按钮时都会复制微调器，如果您不反对在全局范围内定义变量，那么这对我来说效果很好。

    var hasCardButtonBeenClicked = '';
    $(".js-mela-card-button").on("click", function(){  
        if(!hasCardButtonBeenClicked){
            hasCardButtonBeenClicked = true;
            $(this).append('<i class="fa fa-circle-o-notch fa-spin" style="margin-left: 3px; font-size: 15px;" aria-hidden="true"></i>');
        }    
    });

注意，我所做的只是声明一个变量，只要它的值为null，点击之后的动作就会发生，然后将变量值设置为“true”（它可以是任何值，只要它不为空），进一步禁用按钮，直到刷新浏览器或变量设置为 null。

回想起来，将 hasCardButtonBeenClicked 变量设置为“false”开始可能更有意义，然后根据需要在“true”和“false”之间交替。

Answer 10

这个例子有效。

---

HTML 代码：

  <div class="wrapper">
     <div class="mask">Something</div> 
  </div>

jQuery:

    var fade = function(){
        $(".mask").fadeToggle(500,function(){
            $(this).parent().on("click",function(){
                $(this).off("click");
                fade();
            });
        });
    };

    $(".wrapper").on("click",function(){
        $(this).off("click");
        fade();     
    });

Answer 11

$("#button_id").click(function() {
    $('#button_id').attr('disabled', 'true');
    $('#myDiv').hide(function() { $('#button_id').removeAttr('disabled'); });
}); 

不要用.attr()做残疾人，用.prop()，这样更好。

Answer 12

此代码将在按钮标签上显示加载，并将按钮设置为禁用状态，然后处理后重新启用并返回原始按钮文本：

$(function () {

        $(".btn-Loading").each(function (idx, elm) {
            $(elm).click(function () {
                //do processing
                if ($(".input-validation-error").length > 0)
                    return;
                $(this).attr("label", $(this).text()).text("loading ....");
                $(this).delay(1000).animate({ disabled: true }, 1000, function () {
                    //original event call
                    $.when($(elm).delay(1000).one("click")).done(function () {
                        $(this).animate({ disabled: false }, 1000, function () {
                            $(this).text($(this).attr("label"));
                        })
                    });
                    //processing finalized
                });
            });
        });
        // and fire it after definition
    }
   );