禁用匿名事件侦听器或将参数和事件传递给非匿名侦听器

Question

我正在使用以下侦听器来侦听移动设备上的滑动和触摸事件。它具有以下签名：

$.fn.onSwipe = function(handlers) { // adding a jQuery prototype.
    my_element.addEventListener('touchmove', function(event) {
        handleSwipe(event, handlers.left, handlers.right, handlers.up, handlers.down);
    });
}

我喜欢这个，因为它允许我：

$("foo").onSwipe({
    left: (event) => { ... }, // I can define this right here.
    right: (event) => { ... },
    up: (event) => { ... },
    down: (event) => { ... },
})

对于left、right等，我可以在分配监听器的范围内定义函数，同时还能在监听器中看到事件。

我尝试在我的方向处理程序中执行event.preventDefault，但这仍然会阻止滚动（我想通过删除事件侦听器来启用）。

问题：

1. 我无法删除该事件，因为它是匿名的。
2. 我不知道如何创建一个命名函数，同时能够以相同的方式传递它，以便addEventListner 将event 和方向处理程序（如handlers.left()）传递给我的@987654329 @事件。

注意：我对使用其他第三方库不感兴趣。

Answer 1

由于您已经在使用 jQuery，因此一种选择是使用 .on 附加侦听器，从而允许您使用 .off 将它们全部删除，而无需保存对它们的引用：

$.fn.onSwipe = function(handlers) { // adding a jQuery prototype.
    $(this).on('touchmove', function(event) {
        handleSwipe(event, handlers.left, handlers.right, handlers.up, handlers.down);
    });
};
$.fn.offSwipe = function() {
    $(this).off('touchmove');
};

如果您可能将其他touchmove 侦听器附加到同一元素，那么您需要在调用时保存对已创建函数的引用。不使用 jQuery（$.fn 部分除外）：

const handlersByElement = new Map();
$.fn.onSwipe = function(handlers) { // adding a jQuery prototype.
  const handler = function(event) {
    handleSwipe(event, handlers.left, handlers.right, handlers.up, handlers.down);
  };
  for (const elm of this) {
    handlersByElement.set(elm, handler);
    elm.addEventListener('touchmove', handler);
  }
};
$.fn.offSwipe = function() {
  for (const elm of this) {
    handlersByElement.set(elm, handler);
    elm.removeEventListener('touchmove', handlersByElement.get(elm));
  }
};

您还可以将 event namespaces 与 jQuery 一起使用来简化事件的添加和删除，而无需保存对它们的引用，也无需删除该类型的 所有 事件，感谢@VLAZ：

$.fn.onSwipe = function(handlers) { // adding a jQuery prototype.
    $(this).on('touchmove.myswiper', function(event) {
        handleSwipe(event, handlers.left, handlers.right, handlers.up, handlers.down);
    });
};
$.fn.offSwipe = function() {
    $(this).off('touchmove.myswiper');
};