调整大小后删除eventListeners

Question

我需要在调整浏览器大小后删除我的事件侦听器。我试过这样的事情：

window.addEventListener('resize',() => { 
     const bp = this.breakpointInit.getValue(); 

     if (bp === 'mobile') { 
     this.toggleMobile(); 
     } else { 
     this.toggleDesktop(); 
     } 
    }); 
    } 

    toggleMobile() { 
    Array.prototype.forEach.call(this.elements, (el) => { 
     const activeClass = `${el.classList[0]}--active`; 

     el.addEventListener('touchstart', (e) => { 
     this.switchClass(e, el, activeClass); 
     }); 

     el.removeEventListener('mouseenter', (e) => { 
     this.switchClass(e, el, activeClass); 
     }); 

     el.removeEventListener('mouseleave', (e) => { 
     this.switchClass(e, el, activeClass); 
     }); 
    }); 
    } 

    toggleDesktop() { 
    Array.prototype.forEach.call(this.elements, (el) => { 
     const activeClass = `${el.classList[0]}--active`; 

     el.addEventListener('click', (e) => { 
     this.switchClass(e, el, activeClass); 
     }); 

     el.addEventListener('mouseenter', (e) => { 
     this.switchClass(e, el, activeClass); 
     }); 

     el.addEventListener('mouseleave', (e) => { 
     this.switchClass(e, el, activeClass); 
     }); 

     el.removeEventListener('touchstart', (e) => { 
     this.switchClass(e, el, activeClass); 
     }); 
    }); 
    } 

上述功能在需要时触发，但事件侦听器结转。我做错了什么？

Answer 1

您正在分配匿名函数，这些函数不能真正删除。

尝试这样：

let me = this; 

//this probably won't work exactly as-is, but you should get the idea 
touchStartHandler(e) { 
    me.switchClass(e, el, activeClass); 
} 

el.addEventListener('touchstart', touchStartHandler); 

//... 

el.removeEventListener('touchstart', touchStartHandler); 

有一个名为功能允许您添加，只要你想删除的东西，因为你原来的处理函数的引用。

Answer 2

每次您声明一个函数时，都会创建一个全新的函数实例。这就是为什么你无法从事件监听器中删除它的原因。该功能的实例不存在开始。只要你引用同一个函数的声明实例，它就可以工作。例如（使用数组）：

window.addEventListener('resize',() => { 
     const bp = this.breakpointInit.getValue(); 

     if (bp === 'mobile') { 
     this.toggleMobile(); 
     } else { 
     this.toggleDesktop(); 
     } 
    }); 
    } 

    var handlers = [(e) => { // touchstart 
     const activeClass = `${el.classList[0]}--active`; 
     this.switchClass(e, e.target, activeClass); 
     },(e) => { // click 
     const activeClass = `${el.classList[0]}--active`; 
     this.switchClass(e, e.target, activeClass); 
     },(e) => { // mouseenter 
     const activeClass = `${el.classList[0]}--active`; 
     this.switchClass(e, e.target, activeClass); 
     },(e) => { // mouseleave 
     const activeClass = `${el.classList[0]}--active`; 
     this.switchClass(e, e.target, activeClass); 
     }]; 

    toggleMobile() { 
    Array.prototype.forEach.call(this.elements, (el) => { 
     el.addEventListener('touchstart', handlers[0]); 
     el.removeEventListener('click', handlers[1]); 
     el.removeEventListener('mouseenter', handlers[2]); 
     el.removeEventListener('mouseleave', handlers[3]); 
    }); 
    } 

    toggleDesktop() { 
    Array.prototype.forEach.call(this.elements, (el) => { 
     el.addEventListener('click', handlers[1]); 
     el.addEventListener('mouseenter', handlers[2]); 
     el.addEventListener('mouseleave', handlers[3]); 
     el.removeEventListener('touchstart', handlers[0]); 
    }); 
    } 

这使用一个数组来跟踪函数实例。注意它们都是相同的代码，但技术上不同的实例。如果他们都将保持不变，那么你实际上可以逃避只为所有事件监听器使用单个实例。