如果要移除事件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. asp.net 关于cookie的操作

    一.无子键或单级cookie 读写(1).写入: 第一种 HttpCookie cookie=new HttpCookie("User"); cookie.Value=" ...

  2. Network Stack‎ : CookieMonster

    CookieMonster   The CookieMonster is the class in Chromium which handles in-browser storage, managem ...

  3. Important Abstractions and Data Structures

    For Developers‎ > ‎Coding Style‎ > ‎ Important Abstractions and Data Structures 目录 1 TaskRunne ...

  4. ZOJ 3175 Number of Containers 分块

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3216 乱搞的...watashi是分块做的...但我并不知道什么是分块...大 ...

  5. Git学习总结(5)——搭建Git简易高效服务器

    1. mysysgit+gitblit安装流程 1.1资源  需先下载好的资源(公司用的1.6,1.7+请自行匹配对应的mysysgit+gitblit):  jdk1.6  Git-1.8.4-pr ...

  6. CODEVS——T 4189 字典

    http://codevs.cn/problem/4189/  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 大师 Master 题解  查看运行结果     题目描述 Des ...

  7. C - The C Answer (2nd Edition) - Exercise 1-4

    /* Write a program to print the corresponding Celsius to Fahrenheit table. */ #include <stdio.h&g ...

  8. C#最简单的登录Web服务

    因为演示程序,所以有下面问题: 1.password是明码传输. 本文在  C#建立最简单的web服务,无需IIS  的基础上完毕. 详细步骤: 一.RequestProcessor添加变量mLogi ...

  9. elasticsearch index 之 create index(二)

    创建索引需要创建索引并且更新集群index matedata,这一过程在MetaDataCreateIndexService的createIndex方法中完成.这里会提交一个高优先级,AckedClu ...

  10. 刘汝佳 算法竞赛-入门经典 第二部分 算法篇 第六章 2(Binary Trees)

    112 - Tree Summing 题目大意:给出一个数,再给一颗树,每个头节点的子树被包含在头节点之后的括号里,寻找是否有从头节点到叶子的和与给出的数相等,如果有则输出yes,没有输出no! 解题 ...