亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

無法從文檔中刪除事件偵聽器

無法從文檔中刪除事件偵聽器

慕蓋茨4494581 2022-12-02 10:33:03
我有一個按鈕。單擊此按鈕時,我會做兩件事打開搜索菜單將事件偵聽器附加到文檔主體以偵聽關閉事件。但是,我似乎無法從關閉函數的文檔中刪除事件監聽器。也就是說,我第二次嘗試打開菜單時,它會立即調用關閉功能我的問題是...如何刪除文檔事件偵聽器?我該怎么做,如果用戶點擊搜索菜單,它就不會觸發文檔點擊事件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 });}
查看完整描述

1 回答

?
天涯盡頭無女友

TA貢獻1831條經驗 獲得超9個贊

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


查看完整回答
反對 回復 2022-12-02
  • 1 回答
  • 0 關注
  • 111 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號