1

我做了一个小测试代码，因为我不确定是否可以在调用它们的范围之外关闭侦听器，我想知道为什么在我的测试代码中，当我在 .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();
});

jsfiddle

所以再一次，问题是：

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

似乎破坏了代码，同时使用：

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

似乎工作得很好。

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

4

2 回答 2

1

当您将函数传递给 时.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');
}

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

于 2013-11-03T18:50:00.803 回答
1

这是因为当将函数作为第二个参数传递给函数时，off它应该与注册的函数实例相同。

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

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

但这会：

function clickHandler() {}

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

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

于 2013-11-03T18:50:01.240 回答