如果要移除事件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事件的更多相关文章

  1. mui 怎样监听scroll事件的滚动距离

    var scroll = mui('.mui-scroll-wrapper').scroll(); document.querySelector('.mui-scroll-wrapper' ).add ...

  2. Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点

    前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...

  3. js 事件监听 冒泡事件

    js 事件监听  冒泡事件   的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

  4. 两种js监听滚轮事件的方式

    前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = functio ...

  5. vue监听滚动事件,实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

  6. vue监听滚动事件-元素固定位置显示

    1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...

  7. vue监听滚动事件 实现某元素吸顶或者固定位置显示

    https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...

  8. vue监听滚动事件

    vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted( ...

  9. Qt实现小功能之列表无限加载(创意很不错:监听滚动条事件,到底部的时候再new QListWidgetItem)

    概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...

随机推荐

  1. 日天的终生大事(dp)

    日天的终生大事 题目描述 日天学长向妹子表白了,妹子说:“日天你那么聪明,回答我一个问题就答应你.你告诉我,L位K进制数有多少个?”日天表示这个问题太简单了,要求提高难度.妹子想了想说:“那么我增加一 ...

  2. Python正则表达式初识(六)

    继续分享Python正则表达式基础,今天给大家分享的正则表达式特殊符号是“[]”.中括号十分实用,其有特殊含义,其代表的意思是中括号中的字符只要满足其中任意一个就可以.其用法一共有三种,分别对其进行具 ...

  3. IDEA下——Spring入门程序

    创建一个Maven的项目,我的项目结构如下: 在pom文件里写下需要导入的依赖: <?xml version="1.0" encoding="UTF-8" ...

  4. 论Nim中的 proc 和 method

    在Nim中.proc 是定义过程的keyword.method 是定义方法的keyword.它们之间根本的差别是proc定义的过程是静态绑定.method定义的方法是动态绑定.谈到静态绑定.动态绑定又 ...

  5. js---05 自定义属性

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. VS 格式化代码 Ctrl + K, Ctrl + F

  7. Ajax的跨域问题分析

    一.Ajax的跨域问题 Ajax是利用javascript内置XMLHttpRequest对象来进行传输的,所以它依赖于XMLHttpRequest对象,而XMLHttpRequest对象却有很多的限 ...

  8. [log4j]Slf4j的包冲突

    Caused by: java.lang.NoClassDefFoundError: Could not initialize class org.apache.log4j.Log4jLoggerFa ...

  9. Java:异常体系

    异常的类别:可处理异常,运行时异常,非运行时异常 子类重写父类方法,父类方法有异常抛出, 子类重写父类的方法? 不能比父类抛出更大的异常 前言:java 中的异常处理机制你真的理解了吗?掌握了吗?ca ...

  10. flask使用第三方云通讯平台时,出现{'172001':'网络错误'}解决方法

    问题描述:flask使用第三方云通讯平台时,出现{'172001':'网络错误'} 解决方法: 在sms.py文件中添加如下代码 import ssl # 取消证书验证ssl._create_defa ...