1. 程式人生 > >react取消監聽scroll事件

react取消監聽scroll事件

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事件