15

我想知道如何在添加一个事件侦听器后删除一个事件侦听器，您在 jquery 中使用 on 和 off 的方式？

document.removeEventListener('touchstart');
document.addEventListener('touchstart', function (e) {
     closePopupOnClick(e, popup);
});

但这实际上并没有删除事件侦听器。如果我将 addEventListener 代码放在一个函数中并将该函数传递给 removeEventListener 它将不起作用，因为你不能将参数传递给函数。有人知道怎么做吗？

4

2 回答 2

27

将侦听器作为变量并通过附加.addEventListener

var myListener = function (e) {
    closePopupOnClick(e, popup);
};
document.addEventListener('touchstart', myListener, true);

然后在删除时再次传递它.removeEventListener

document.removeEventListener('touchstart', myListener);

如果您不在严格模式下，您可以使用以下命令使侦听器自行移除arguments.callee

document.addEventListener('touchstart', function (e) {
    closePopupOnClick(e, popup);
    document.removeEventListener('touchstart', arguments.callee);
}, true);

如果您处于严格模式，如果您希望函数删除自身，则必须使用命名函数表达式

document.addEventListener('touchstart', function myListener(e) {
    closePopupOnClick(e, popup);
    document.removeEventListener('touchstart', myListener);
}, true);

如果您想在侦听器中使用可能被某些东西（例如循环）更改的变量，那么您可以编写一个生成器函数，例如

function listenerGenerator(popup) {
    return function (e) {
        closePopupOnClick(e, popup);
    };
}

现在您可以创建侦听器，listenerGenerator(popup)它将作用于popup变量。请注意，如果popup是Object，它将是ByRef，因此可能仍会发生变化。

于 2013-02-26T22:26:22.737 回答
-1

我认为这样做的一个好方法是自己添加一个事件，然后调用

event.stopImmediatePropagation()

例如：

htmlElement.addEventListener('touchstart', (event) => event.stopImmediatePropagation());

在 Chrome 中有类似的功能

htmlElement.removeAllListeners()

这可能会真正删除侦听器。但我认为这不是一个明智的解决方案，因为其他浏览器似乎没有很好地支持它。

于 2021-03-09T16:32:08.373 回答