无法从文档中删除事件侦听器

Question

我有一个按钮。单击此按钮时，我会做两件事打开搜索菜单将事件侦听器附加到文档主体以侦听关闭事件。但是，我似乎无法从关闭函数的文档中删除事件监听器。也就是说，我第二次尝试打开菜单时，它会立即调用关闭功能我的问题是...如何删除文档事件侦听器？我该怎么做，如果用户点击搜索菜单，它就不会触发文档点击事件openDesktopSearchMenu() {    this.$desktopSearchMenu.style.height = '330px';    document.addEventListener('click', this.closeDesktopSearchMenu.bind(this), true);}closeDesktopSearchMenu() {    this.$desktopSearchMenu.style.height = '0px';    document.removeEventListener('click', this.closeDesktopSearchMenu.bind(this), true);}7 月 24 日更新 尼克的回答绝对让我朝着正确的方向前进。但是，由于捕获参数，文档总是首先被调用。因此，如果用户在搜索菜单中单击，它会自动关闭。删除捕获参数会导致在打开后立即调用关闭函数。对我有用的解决方法是在添加时将侦听器包装在超时内。然后自然地我不得不在搜索菜单上调用 stopPropagation() 单击searchMenuClick = (e) => {    e.stopPropagation();}/** open the desktop search menu */openDesktopSearchMenu = () => {    this.$desktopSearchMenu.style.height = '330px';    this.$navBar.classList.add('search');    setTimeout(() => {        document.addEventListener('click', this.closeDesktopSearchMenu, { capture: false });    });}closeDesktopSearchMenu = () => {    this.$desktopSearchMenu.style.height = '0px';    setTimeout(() => {        this.$navBar.classList.remove('search');    }, 300);    document.removeEventListener('click', this.closeDesktopSearchMenu, { capture: false });}

Answer 1

该.bind()方法返回一个新函数，因此您作为回调添加到的函数addEventListener是对您要删除的函数的不同引用。因此，事件侦听器不会被删除。

您可以考虑像这样在构造函数中进行绑定：

constructor() {

  ...

  this.closeDesktopSearchMenu = this.closeDesktopSearchMenu.bind(this);

  ...

}

然后像这样使用你的方法（没有绑定，就像现在在构造函数中完成的那样）：

openDesktopSearchMenu() {

    this.$desktopSearchMenu.style.height = '330px';

    document.addEventListener('click', this.closeDesktopSearchMenu, true);

}

closeDesktopSearchMenu() {

    this.$desktopSearchMenu.style.height = '0px';

    document.removeEventListener('click', this.closeDesktopSearchMen, true);

}

请参阅下面的示例片段：

class Test {

  constructor() {

    this.prop = "bar";

    this.foo = this.foo.bind(this);

  }

  

  foo() {

    console.log('Foo', this.prop);

  }

  

  a() {

    document.addEventListener('click', this.foo, true);

  }

  

  b() {

    document.removeEventListener('click', this.foo, true);

  }

}

const test = new Test();

console.log("Event listener added");

test.a();

setTimeout(() => {

  console.log("Event listener removed");

  test.b();

}, 3000);