如果要移除事件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. LG Gram 2018 z980 白

    因为今年8代处理器i5的双核变成了四核,感觉是个换电脑的好时机,本来打算买macbook,但是6月的发布会并没有发布,于是开始寻找一些比较有特点的笔记本电脑. 了解了这样一款笔记本 LG GRAM 1 ...

  2. Activiti工作流(3):activiti核心API

    ProcessEngine 说明: 1)     在Activiti中最核心的类,其他的类都是由他而来. 2) 产生方式:ProcessEngine defaultProcessEngine = Pr ...

  3. 使用IntelliJ IDEA开发前的基本设置,有助于提高开发效率

    2.界面字体大小设置 File菜单->Settings->Appearance->Override default fonts by(not recommended): Name:宋 ...

  4. RvmTranslator6.4 is released

    RvmTranslator6.4 is released eryar@163.com RvmTranslator can translate the RVM file exported by AVEV ...

  5. vim-缓存区中打开另外一个文件的方法

    现在有这么一种情况:    我现在在ubuntu用户根目录下--    我根目录下有一个文件夹blogs,这个文件夹下面有两个文件:text1,text2.    我现在从-目录下进行如下操作    ...

  6. vue中的插槽slot理解

    本篇文章参考赛冷思的个人博客 1.函数默认传参 在我们写js函数我们的可能会给他们一个默认的参数,写法是 function show(age,name){ var age = age || 20; v ...

  7. Javascript函数的基本概念+匿名立即执行函数

    函数声明.函数表达式.匿名函数 函数声明:function fnName () {…};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName = f ...

  8. 洛谷P2818 天使的起誓

    题目描述 Tenshi非常幸运地被选为掌管智慧之匙的天使.在正式任职之前,她必须和其他新当选的天使一样要宣誓.宣誓仪式是每位天使各自表述自己的使命,他们的发言稿放在n个呈圆形排列的宝盒中.这些宝盒按顺 ...

  9. IFC数据模式架构的四个概念层

    IFC模型体系结构由四个层次构成, 从下到上依次是 资源层(Resource Layer).核心层(Core Layer).交互层(Interoperability Layer).领域层(Domain ...

  10. cat---查看文件内容