react取消監聽scroll事件
阿新 • • 發佈:2019-02-22
scroll 事件 tlist 取消 匿名 外部 () dde 匿名函數
如果要移除事件addEventListener
的執行函數必須使用外部函數而不能直接使用匿名函數
錯誤寫法:
// 這樣寫是移除不了滾動事件的
componentDidMount() { // 添加滾動監聽 window.addEventListener(‘scroll‘, ()=>{ console.log("滾動距離:",window.scrollY) }); } // 組件將要卸載,取消監聽window滾動事件 componentWillUnmount(){ window.removeEventListener(‘scroll‘, ()=>{ console.log("滾動距離:",window.scrollY) }); }
正確寫法:
componentDidMount() { // 添加滾動監聽 window.addEventListener(‘scroll‘, this.scroll); } // 組件將要卸載,取消監聽window滾動事件 componentWillUnmount(){ window.removeEventListener(‘scroll‘, this.scroll); } scroll1 = ()=>{ console.log("滾動距離:",window.scrollY) }
react取消監聽scroll事件