Javascript jQuery-如何在触发事件后临时禁用onclick事件侦听器？

在触发事件后，如何临时禁用onclick事件监听器（首选jQuery）

例如：

在用户单击按钮并启动下面的函数后，我想禁用onclick侦听器，因此不会向我的django视图启动相同的命令

$(".btnRemove").click(function(){
   $(this).attr("src", "/url/to/ajax-loader.gif");
   $.ajax({
        type: "GET",
        url: "/url/to/django/view/to/remove/item/" + this.id,
        dataType: "json",
        success: function(returned_data){
            $.each(returned_data, function(i, item){
              // do stuff                       
     });
   }
});

非常感谢

---

Aldo

为什么不禁用该按钮？您想单独禁用此listner的具体原因是什么？

---

顺便说一句，从您的代码中，我看到您正在进行一个ajax调用。所以你特别想阻止用户，直到电话恢复？如果是，您可以尝试使用jQuery插件，我建议禁用该按钮，然后在Ajax完成例程中重新启用它（记住，成功或失败）。如果您担心浏览器不尊重您禁用按钮，您可以在按钮上使用您自己的标志（例如，使用

数据-

前缀作为良好实践并与HTML5兼容，设置一个名为

数据禁用

的属性）。但是，除非遇到浏览器没有禁用按钮的问题，否则我可能会认为这已经足够好了。

你想禁用点击事件侦听器多长时间？一种方法是使用jQuery的

unbind

解除事件侦听器的绑定

但最好的做法是不要只在以后重新绑定事件时才解除绑定。改为使用布尔值

var active = true;
$(".btnRemove").click(function() {
    if (!active) {
        return;
    }
    active = false;
    $(this).attr("src", "/url/to/ajax-loader.gif");
    $.ajax({
        type: "GET",
        url: "/url/to/django/view/to/remove/item/" + this.id,
        dataType: "json",
        success: function(returned_data) {
            active = true; // activate it again !
            $.each(returned_data, function(i, item) {
                // do stuff                       
            });
        }
    });
});

---

编辑：为了安全起见，您还应该关心其他ajax完成例程（只有三种：

成功

，

错误

，

完成

），否则

活动

可能会保持为假。

有很多方法可以做到这一点。例如：

$(".btnRemove").click(function() {
    var $this = $(this);
    if ($this.data("executing")) return;
    $this
        .data("executing", true)
        .attr("src", "/url/to/ajax-loader.gif");
    $.get("/url/to/django/view/to/remove/item/" + this.id, function(returnedData) {
        // ... do your stuff ...
        $this.removeData("executing");
    });
});

或

我们还可以使用事件委派来实现更清晰的代码和更好的性能：

$(document).on("click", ".btnRemove:not(.unclickable)", function() {
    var $this = $(this)
        .addClass("unclickable")
        .attr("src", "/url/to/ajax-loader.gif");
    $.get("/url/to/django/view/to/remove/item/" + this.id, function(returnedData) {
        // ... do your stuff ...
        $this.removeClass("unclickable");
    });
});

---

如果我们不需要在处理程序执行后重新启用它，那么我们可以使用

.one（）

方法。它绑定只执行一次的处理程序。请参阅jQuery文档：

您可以在基于布尔值的单击中执行操作。单击时，更改布尔值，并在几秒钟后使用setTimeout（）将其更改回来。这将有效地限制用户每几秒钟只点击一次按钮

var isEnabled = true;

$("a.clickMe").click(function(e){
  e.preventDefault();
  if (isEnabled == true) {
    isEnabled = false; // disable future clicks for now
    do_Something();
    setTimeout(function(){
      isEnabled = true;
    }, 3000); // restore functionality after 3 seconds
  }
});

---

我会设置一个全局变量来跟踪AJAX请求

var myApp = {
  ajax: null
}

// Fired when an AJAX request begins
$.ajaxStart(function() { myApp.ajax = 1 });

// Fired when an AJAX request completes
$.ajaxComplete(function() { myApp.ajax = null });

// Fired before an AJAX request begins
$.ajaxSend(function(e, xhr, opt) {
  if(myApp.ajax != null) {
    alert("A request is currently processing. Please wait.");
    xhr.abort();
  }
});

然后用这一点魔法来阻止同时发生的请求

var myApp = {
  ajax: null
}

// Fired when an AJAX request begins
$.ajaxStart(function() { myApp.ajax = 1 });

// Fired when an AJAX request completes
$.ajaxComplete(function() { myApp.ajax = null });

// Fired before an AJAX request begins
$.ajaxSend(function(e, xhr, opt) {
  if(myApp.ajax != null) {
    alert("A request is currently processing. Please wait.");
    xhr.abort();
  }
});

---

使用这种方法，您不必返回代码并修改每一个AJAX调用。（我称之为“append”解决方案）

我会使用一个类，例如“ajax running”。只有在单击的元素没有“ajax running”类时，才会执行click事件。一旦ajax调用完成，就可以删除“ajax running”类，以便再次单击它

$(".btnRemove").click(function(){
    var $button         = $(this);
    var is_ajaxRunning  = $button.hasClass('ajax-running');
    if( !is_ajaxRunning ){
        $.ajax({
            ...
            success: function(returned_data) {
                ...
                $button.removeClass('ajax-running');
            });
        };
    }   
});

---

如果您是通过ajax发布的，您可以在单击时禁用该按钮，并在流程完成后启用它。但是，如果您正在回帖，则不能仅禁用该按钮。禁用该按钮会导致服务器端单击事件不会触发。因此，只需隐藏点击按钮，并显示用户友好的消息。关于帮助的帖子。

您也可以隐藏按钮（或包含的div）

如果需要再次显示，可以调用.show（）

---

还取决于您的用例，您应该考虑使用加载覆盖来代替

如何临时？在你想再次接受点击事件之前，必须做些什么？（注：不允许GET请求执行状态更改。）@bobince:噢，如果我们都遵守这个简单的规则，那不是很好吗@OP：更多关于鲍勃所说的（用令人恐惧的夸张散文）这里：也许我还没有全部解释：我有一个购物车里的物品清单。每个项目都有一个图像，它的id就是项目id，并且有class=“btnRemove”（我知道它不是按钮）。当用户单击按钮将其删除时，我将按钮更改为预加载图像。我想要的是：当图像开始加载时，它不再接受单击，因此不会触发相同的命令@bobince：你是对的，但我认为这是一种很酷的方法，可以在不重新加载页面的情况下删除iTen。这是如何完成的，active只不过是一个布尔值，在开始时读取

active

直到ajax请求成功完成为止。在这段时间里，点击处理程序在开始时会立即返回，因此基本上不会执行。我喜欢返回false的简单性…我不知道这是否比以某种方式停止传播更好，但在我的情况下它更容易并且有效=）这不总是会返回吗，不管发生什么…？@TaylorA.Leach既然你提到了它，我认为if语句中的第一个检查应该是

if（！active）

。我会更新答案，这个对我来说很有用。我可以安全地解除绑定，因为一旦do stuff部分结束，image按钮就会被销毁。在这种情况下，您应该使用.one（）方法将处理程序绑定为只执行一次。参见jQuery文档：是的，我不知道one（）方法。这将以更优雅的方式完成！Thx.

.on（“单击“，”.btmRemove:not（[disabled]）”，

是另一个选项，如果您希望设置disabled属性而不是使用类。@timaschew为True，但问题不是禁用元素，而是禁用click处理程序。在这种情况下，一个上的disabled属性充当一个标志，以排除我们的click处理程序。实际上，我正打算添加它。它的名称和名称更简洁与这些示例中跳过的所有其他环相比，在内部取消绑定/重新绑定。从jQuery 1.9开始，的所有处理程序，包括使用.ajaxStart（）方法添加的处理程序，都必须附加到文档。

$(".btnRemove").click(function() {
   $(this).hide();
   // your code here...
})