Javascript jquery.off（）：如何仅删除某个单击处理程序？

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

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

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


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

但是什么也没有被移除

所以我去掉了中间的空间：

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

但回到第1步：两个处理程序都被删除

正确的语法应该是

---

因为您正在调用。请关闭单击事件。它正在删除选定元素上所有可能的单击事件。诀窍是定义一个处理程序并仅删除该特定处理程序

function showPluto() {
  showMsg("pluto");
};

function showPippo() {
  showMsg("pippo");
};

function showMsg(text) {
  alert("showMsg called with text: " + text);
};

$('.pippo').on('click', showPippo);
$('.pluto').on('click', showPluto);

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

.off（）方法允许您以多个选择器以及特定事件为目标


$（'.pippo'）.off（）
将删除
.pippo
选择器的所有事件
$（'.pippo'）.off（'click'）
将删除
.pippo
选择器的所有
click
事件
$（'.pippo'）。关闭（'click'，handler）
将删除
.pippo
选择器中该处理程序的所有
click
事件

在您的例子中，用于添加事件侦听器的
处理程序是一个匿名函数，因此
处理程序
不能用于
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");
});

如果您愿意，也可以将处理程序分配给变量。
这允许您指定要删除的选择器、事件类型和处理程序

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

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

但通常情况下，如果不需要变量，就不应该创建它们。
好的，解决了。我只需要将处理程序绑定到文档：

function showMsg(text) {
    alert("showMsg called with text: " + text);
};

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


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

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

使用jQuery的一个更简单的选择是为单击事件定义名称空间：

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

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

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

$（文档）
的性能受到了影响。只有在动态添加元素的情况下，您才需要使用它。@TarranJones大约10个元素的性能影响应该可以忽略不计，但是：谢谢您指出。是的，您的权利，它在文档中说，它只是在mousemove事件上才真正起作用。@Dr.GianluigiZaneZanettini我认为这个答案没有最好的解决方案，因为你可以在定义匿名函数的地方添加名称，比如：
xxx.click（function handlerName（）{$（this）.off（“click”，handlerName）}
function showMsg(text) {
    alert("showMsg called with text: " + text);
};

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


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

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

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

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