jquery .off():如何只删除某个点击处理程序？

Question

我有一个绑定了两个处理程序的元素:

<button class="pippo pluto">
  push me
</button>

$('.pippo').on('click', function () {
    alert("pippo");
});


$('.pluto').on('click', function () {
    alert("pluto");
});

我正在尝试.off()只有其中一个,但是语法躲过了我:-(我正在试着用...

<button class="dai">
  remove
</button>

$('.dai').on('click', function () {
    $('.pippo').off('click');
  alert("ok, removed");
});

但这会删除处理程序.所以我正在尝试......

$('.pippo').off('click .pippo');

但是什么都没有被删除.

所以我删除了中间空间:

$('.pippo').off('click .pippo');

但回到正方形1:两个处理程序都被删除.

那么正确的语法将是......？

https://jsfiddle.net/6hm00xxv/

Answer 1

该.off();方法允许您将多个目标作为特定事件.

• $('.pippo').off()将删除.pippo选择器的所有事件.
• $('.pippo').off('click')将删除所有click事件.pippo
• $('.pippo').off('click', handler)将click使用该处理程序删除.pippo选择器的所有事件.

在您的情况下,handler用于添加事件侦听器的是匿名函数,因此handler无法在off()方法中使用它来关闭该事件.这将为您提供三个选项,使用变量,使用命名空间或两者.

弄清楚使用哪一个很简单.

if( "The same handler is needed more than once" ){
    // you should assign it to a variable,
} else {
    // use an anonymous function. 
}

if ( "I intent to turn off the event" && ( "The handler is an anonymous function" || "I want to turn off multiple listeners for this selector at once" ) ){
    // use a namespace
} 

在你的情况下

• 你的处理程序只使用一次,所以你的处理程序应该是一个匿名函数.
• 你希望关闭事件,你的处理程序是匿名的,所以使用命名空间.

所以它看起来像这样

$('.pippo').on('click.group1', function () {
    alert("pippo");
});

$('.dai').on('click', function () {
    $('.pippo').off('click.group1');
    alert("ok, removed");
});

如果您愿意,也可以将处理程序分配给变量.这允许您指定要删除的选择器,eventType和处理程序.

var pippo_click = function (e) {
    alert("pippo");
});

$('.dai').on('click', function () {
    $('.pippo').off('click', pippo_click);
    alert("ok, removed");
});

但通常,如果不需要,您不应创建变量.

Answer 2

使用 jQuery 的一种更简单的替代方法是为您的点击事件定义一个命名空间：

$('.pippo').on('click.first', ...);
$('.pluto').on('click.second', ...);

// Remove only the pippo listener
$('.pippo').off('click.first');

请注意，您的类pippo和pluto引用相同的元素，因此使用其中一个不会改变任何内容。

https://jsfiddle.net/6hm00xxv/2/