Question

我想知道Javascript或jQuery是否有办法删除事件监听器。让我们说我想创建一个我只想触发一次的函数，比如说我想要一个按钮来显示文档上的一些隐藏元素，我会做这个函数（假设隐藏元素有一个隐藏它们的hidden类：

jQuery('#toggler').click(function() {
    console.log('Hidden elements are now shown');
    jQuery('.hidden').removeClass('hidden');
});

够简单吧？现在，我的实际问题进来了，我不希望jquery每次点击按钮时一次又一次地运行该功能，因为元素已经显示，所以有一个干净的方式去做吧？因此，在多次单击切换器后的这个示例中，我只想获得一个控制台消息。

我可以jQuery(this).unbind('click')，但这会导致删除所有触发器，我只想删除当前触发器。

当我面对这样的场景时，我通常会做的就是解决这个问题（丑陋而实际上并没有阻止代码执行，但只处理代码的结果）：

var toggler_clicked = false;
jQuery('#toggler').click(function() {
    if(toggler_clicked) return;

    toggler_clicked = true;
    console.log('Hidden elements are now shown');
    jQuery('.hidden').removeClass('hidden');
});

此外，我不想使用jQuery＆＃39; one，因为当我需要有条件地删除触发器时，我会遇到同样的问题，所以如果你能提供帮助请给我一个动态的答案。

提前致谢！

Answer 1

你必须这样命名你的功能：

var myFunction = function() {
    console.log('Hidden elements are now shown');
    jQuery('.hidden').removeClass('hidden');
};

以这种方式绑定

jQuery('#toggler').click(myFunction);

然后你可以解除它：

jQuery('#toggler').off('click',myFunction);

不解除其他侦听器的绑定

Answer 2

你可以试试这个：

var myFunc = function() {
    console.log('Hidden elements are now shown');
    jQuery('.hidden').removeClass('hidden');
    jQuery(this).unbind('click', myFunc);
};
jQuery('#toggler').click(myFunc);

这种调用unbind的方式是只删除myFunc处理程序的侦听器，而不是所有连接到toggler上的click的事件。

Answer 3

我会使用.on()及其相反的.off()方法来附加/分离事件处理程序。这是自1.7以来的推荐方式，而不是从jQuery 3.0开始弃用的.bind()和.unbind()版本。

myTyperSpells.writerow(stuff)

＆＃13;

$("#toggler").on("click", function(event) {
  console.log('Hidden elements are now shown');
  $('.hidden').removeClass('hidden');
  // if (/* Add your condition here */) {
    $(this).off(event);
  // }
});

＆＃13;

$("#toggler").on("click", function(event) {
  console.log('Hidden elements are now shown');
  $('.hidden').removeClass('hidden');
  // if (/* Add your condition here */) {
    $(this).off(event);
  // }
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

Answer 4

试试这个

var myFunction = function() {
        console.log('Hidden elements are now shown');
        jQuery('.hidden').removeClass('hidden');
    };

像这样添加事件监听器：

 jQuery('#toggler').addEventListener("click", myFunction);

然后将其删除：

jQuery('#toggler').removeEventListener("click", myFunction);

所以这一切都可以解决问题：

var myFunction = function() {
    console.log('Hidden elements are now shown');
    jQuery('.hidden').removeClass('hidden');
    jQuery('#toggler').removeEventListener("click", myFunction);
};

jQuery('#toggler').addEventListener("click", myFunction);

more about the HTML DOM removeEventListener() Method

Answer 5

Jquery unbind函数有2个参数eventType和handler

您可以将事件监听器放入单独的函数中：

var clickEventHandler = function(){
  //your logic goes here
}

将侦听器添加为参考后：

jQuery('#toggler').click(clickEventHandler);

然后，随后，您可以随时随地取消绑定该特定处理程序：

jQuery('#toggler').unbind('click', clickEventHandler);

Answer 6

我过去常常使用css类来切换点击行为，例如，我曾经在父级上设置了一个点击监听器，并且委托给所有孩子现在默认情况下jquery正在做的事情。无论如何基于css类它将触发ex的事件。

$('.some-parent-element').on(
   'click', 
    'the-behavior-css-class', 
    function() { // do stuff here.... }
)

现在，如果您想要删除此行为，您只需切换元素的类，它就可以完成这项工作。前

$('.some-parent-element').on(
       'click', 
        'hide-me-on-click-or-whatever', 
        function() { 
            $(this).toggleClass('hide-me-on-click-or-whatever')
            // perform the action  
        }
    )

Answer 7

您可以检查元素是否隐藏了类

有条件地jQuery删除触发器

7 个答案: