.off 不适用于回调

.off not working with callback

本文关键字:回调 适用于 不适用 off      更新时间:2023-09-26

我做了一个小的测试代码,因为我不确定是否可以在调用它们的作用域之外关闭侦听器,我想知道为什么在我的测试代码中,当我在 .off 方法中包含回调时,代码似乎不再有效。

var testobj = {
    init: function() {
        testobj.listener();
    },
    listener: function() {
        $(document).on('mousedown', function() {
            testobj.listener_off();
                console.log("on");
        });

    },
    listener_off: function() {
        $(document).on('mouseup', function() {
            $(document).off('mousedown', function() {
                console.log("off");
            });
        });
    }
}
$(function() {
    testobj.init();
});

斯菲德尔

所以再一次,问题是:

$(document).off('mousedown', function() {
    console.log("off");
});

似乎在使用时破坏了代码:

$(document).off('mousedown');

似乎工作正常。

此外,在处理多个事件侦听器(尤其是那些对同一事件做出反应的侦听器)时,调用它们的最佳做法是什么?我将它们分成单独的函数以便稍后调用它们或可能导致问题是否正确?

当你将一个函数传递给.off()时,这意味着你想要删除该特定的处理程序。由于您正在传递一个新实例化的匿名函数,因此它不是任何事件的处理程序,因此没有净效应。

当你有一个引用的处理程序函数时,这种形式的.off()是有意义的:变量名,或某个对象的属性名等。这样,您就可以在设置事件处理程序时通过该引用使用该函数,然后在要取消设置它时再次使用该函数:

function someHandler(ev) {
  // handle handle handle ...
}
// ...
$('#foo').on('click', someHandler);
// ...
if (itsChristmasTime()) {
  $('#foo').off('click', someHandler);
}

在您的情况下,您可能只需要单参数版本,只传递事件名称。跟踪事件处理程序的另一种方法是对事件名称使用限定符。JQuery 在事件名称中查找".",并忽略 "." 和任何后缀以用于事件处理,但它不会完全忘记。因此,您可以使用它来标识处理程序,而无需跟踪正在使用的特定函数:

$('#foo').on('click.remove-me', function(ev) { ... });
// ...
if (itsChristmasTime()) {
  $('#foo').off('click.remove-me');
}

这样,您可以为小部件行为的不同方面维护单独的"点击"处理程序,并有选择地仅删除其中一个/部分。

这是因为

当将函数作为第二个参数传递给off函数时,它应该是注册的同一函数实例

基本上,以下内容将不起作用

$(myDiv).on('click', function () {});
$(myDiv).off('click', function () {});

但这将:

function clickHandler() {}
$(myDiv).on('click', clickHandler);
$(myDiv).off('click', clickHandler);

当您在没有第二个参数的情况下调用off时,它会删除该特定事件的所有侦听器,这就是它在您的情况下工作的原因。