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

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);