页面即使加过了移除监听事件，但是到新页面后事件任然存在 window.removeEventListener('scroll', this.handleScroll);

最新推荐文章于 2024-05-27 09:47:41 发布
最新推荐文章于 2024-05-27 09:47:41 发布
阅读量4.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DemonLhl/article/details/82659496
版权

我给项目加了滚动监听，离开页面后移除监听

但是跳转页面后，发现滚动距离仍然存在。

解决方法：

IMP_L
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html清除事件,HTML DOM removeEventListener()方法简介说明
weixin_31100705的博客
06-09 1882
摘要:下文讲述document.removeEventListener()方法的功能简介说明，如下所示:HTML DOM removeEventListener()方法功能简介document.removeEventListener()方法功能说明:删除通过document.addEventListener()方法添加的文档事件document.removeEventListener方法的语法分享...
VBnet 分线程窗体，主线程卡死任然报告方法的进度值到UI窗体上面
11-03
`ReportProgress`在后台线程中触发事件，而`UIForm_Load`事件处理器确保了主线程正确地监听和处理这些事件。 通过这种方式，即使主线程因其他任务而暂时"卡死"，也能确保分线程中的进度值能够正确地显示在UI上。这...
监听浏览器关闭且不监听刷新事件的方法
m0_49358183的博客
11-27 1394
function closeBrowser() { var _beforeUnload_time = 0, _gap_time = 0 // onunload 发生于当用户离开页面时发生的事件(通过点击一个连接，提交表单，关闭浏览器窗口等等。刷新也会触发) 刷新和关闭浏览器时先触发onbeforeunload再触发onunload 刷新时两次触发的间隔普遍在60毫秒以上 关闭时触发间隔大约在在0-4之间 window.onunload = function () { ...
window.removeEventListener失效问题，removeEventListener不能移除addEventListener解决办法
qingdi1的博客
12-22 5409
window.removeEventListener失效问题，removeEventListener不能移除addEventListener解决办法错误代码正确代码 错误代码 window.addEventListener('scroll', ()=>{ console.log('我在滚动') }, true); window.removeEventListener('scroll') 正确代码 function fn(){ console.log('我在滚动') } window.addEve
Vue 浏览器会话切换、离开页面、最小化窗口、重新回到页面监听
最新发布
Jokerxiuka的博客
05-27 246
【代码】浏览器会话切换、离开页面、最小化窗口、重新回到页面监听。
监听定时器在页面销毁前清除
weixin_49692963的博客
11-22 628
this.timer = setInterval(() => { //每次向后滚动一个，最后一个从头开始。 let arr = MZdata; if (option.dataZoom[0].endValue == arr.length) { option.dataZoom[0].endValue = 9; option.dataZoom[0].startValue = 0; } else {...
vue 中监听窗口发生变化，切换页面触发监听事件window.addEventListener(‘resize‘，fn)报错
super_xxy的博客
09-28 1942
在首页使用echart监听窗口变化window.addEventListener(‘resize’，fn)重画echart，切换页面的时候没有销毁全局监听，导致其他页面无法获取echart的属性而报错。报错信息：Uncaught TypeError: Cannot read property ‘getAttribute’ of null。在离开页面的时候销毁，不然会一直存在，容易造成内存泄漏。
前端如何正确的添加、销毁全局事件监听
DACBE的博客
07-17 6903
在前端编码中，经常会通过addEventListener来添加全局的事件监听，但是，这种全局的事件监听方法若使用不当，很容易造成严重的性能问题，下面我就来说一下如何正确的添加和销毁全局的事件监听。 添加 1、element.addEventListener的使用方法 这里我就不多啰嗦了，网上已经讲的很明白了，下面附上链接。 https://www.runoob.com/jsref/met-element-addeventlistener.html 2、window.addEventListener
工行网银助手卸载完后启动项中任然存在如何删除.docx
09-27
工行网银助手卸载完后启动项中任然存在如何删除.docx
vue单页应用在页面刷新时保留状态数据的方法
10-17
今天小编就为大家分享一篇vue单页应用在页面刷新时保留状态数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
打印机打印出来后表格的线是歪的怎么办.docx
09-27
打印机打印出来后表格的线是歪的怎么办.docx
前端大厂最新面试题-triangle.docx
06-06
但是，这种方式，虽然视觉上是实现了三角形，但实际上，隐藏的部分任然占据部分高度，需要将上方的宽度去掉。 最终实现代码如下： .border { width: 0; height: 0; border-style:solid; border-width: 0 50px ...
vue移除window窗口监听事件两种方法
热门推荐
进步的记录
07-22 1万+
例子：页面窗口变化时，echarts绘制的视图需要resize()，这时需要监听window，但是当组件消耗时也需要移除窗口监听事件。 涉及到的data数据和methods //data data(){ return{ timer:null, // 记录setTimeout chartForm:null, // echarts视图 } } //methods chartResize(){ //防抖 if(this.timer) clearTimeout(th
vue 创建监听,和销毁监听(addEventListener, removeEventListener)
weixin_30847271的博客
05-02 8125
最近在做一个有关监听scroll的功能, 发现我添加监听之后一直不起作用: mounted() { window.addEventListener("scroll", this.setHeadPosition); //this.setHeadPosition方法名 }, 　　后来发现要在后面添加一个true之后才行: mounted() { w...
vue 监听页面滚动位置 当返回 当前页面时还是在原来的位置
qq_53761321的博客
06-20 507
vue 监听页面滚动位置 当返回 当前页面时还是在原来的位置 位置有点乱 自己整理一下 mounted() { // 这里的antiShake使用的是防抖函数 防止滚动调用频繁 window:addEventListener('scroll',antiShake(this.handleScroll,300)) }, methods: { handleScroll() { // 各种浏览器适配 将获取到的值 赋值给data中的scrollTop this
js清除事件监听失效
Ronychen的博客
11-18 2413
当你给一个元素添加事件监听后，需要在组件销毁时给他清除事件监听，有同学就直接想到了这不是很简单吗？直接用removeEventListener就可以了，但实际上有些情况下会不生效： //监听时 document.getElementById("idName").addEventListener('scroll',()=>{ 监听滚动后的函数代码 }) 清除监听 document.getElementById("idName").removeEventListener（‘scroll’,()=>
前端要持续监听事件的性能优化（节流/防抖），scroll方法为例。
high_height的博客
01-09 2191
以滚动事件为例吧，移动端要实现一个简单的滚动到底部加载下一页的需求，就需要监听页面的scroll事件了代码如图： let timeOutFn = false; // $(window).scroll(function () { //监听窗口的滚动事件 clearTimeOut(timeOutFn); //100毫秒内仍然执行滚动就把需要执行的逻辑清除掉，停下来在执行具体函...
JS监听页面滚动事件无效解决方案
xiaomao_wxj的博客
04-12 6120
window.addEventListener事件踩坑 1、在项目中使用window.addEventListener(“scroll”, this.handleFixedTop);事件监听无效解决方案： window.addEventListener("scroll", this.handleFixedTop,true); 使其在事件捕获的时候触发，该值默认为false(事件冒泡) 2、const scrollT = document.documentElement.scrollTop; 获取不到s
removeEventListener “不生效”的思考
纯爱枫若情的博客
11-12 8078
缘起 有时候，在项目中出现的问题，往往是因为对一些基本概念理解的不太透彻，导致在使用过程中进行大量的误用，最后导致在找 bug 的过程中搞得心力交瘁。 最近我就碰到一起由于 removeEventListener 移除“失效” 导致引起的 bug。 起因是由于，我们之前做了一个项目，项目是用 vue 写的。由于是和同事一起写的，所以对于有些地方，掌握的还是很难达到自己写的代码那么透彻的。 因为我们...
function centerPopup() { var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 var popupWidth = popup.offsetWidth; var popupHeight = popup.offsetHeight; var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var offsetLeft = (windowWidth - popupWidth) / 2; var offsetTop = (windowHeight - popupHeight) / 2 + scrollTop; // 设置弹出窗口的位置 popup.style.left = offsetLeft + "px"; popup.style.top = offsetTop + "px"; } // 设置悬浮窗样式 function setPopupStyle() { var windowWidth = window.innerWidth * 0.8; // 按照弹出窗口宽度的80%计算 var windowHeight = window.innerHeight * 0.8; // 按照弹出窗口高度的80%计算 popup.style.position = "fixed"; popup.style.width = windowWidth + "px"; popup.style.height = windowHeight + "px"; popup.style.backgroundColor = "transparent"; popup.style.zIndex = "9999"; } // 在设置图片加载完成后调用居中弹出窗口和设置悬浮窗样式的函数 popupImg.onload = function() { // 设置图片缩放比例 var imgWidth = popupImg.width; var imgHeight = popupImg.height; var widthScale = window.innerWidth * 0.8 / imgWidth; var heightScale = window.innerHeight * 0.8 / imgHeight; scale = Math.min(widthScale, heightScale); popupImg.style.transform = scale(${scale}); // 设置弹出窗口样式和居中位置 setPopupStyle(); centerPopup(); // 显示图片和悬浮窗 popupImg.style.display = "block"; popup.style.display = "block"; } // 添加图片到悬浮窗 popup.appendChild(popupImg); document.body.appendChild(popup); // 初始化居中弹出窗口 centerPopup(); // 添加滚动和调整窗口大小事件监听器 window.addEventListener("scroll", centerPopup); window.addEventListener("resize", centerPopup); // 点击事件监听器，点击其他区域时隐藏弹出窗口 popup.onclick = function () { popup.style.display = "none"; }; // 移除滚动和调整窗口大小事件监听器 function removeListeners() { window.removeEventListener("scroll", centerPopup); window.removeEventListener("resize", centerPopup); } // 在窗口关闭时移除事件监听器 window.onbeforeunload = function () { removeListeners(); }; };根据你提供的代码，我修改后任然存在行数过多时，悬浮窗显示后靠近页面底部，无法显示完整图片在当前页面，并且我需要在点击放大图片后无法再此点击当前放大图片，等我还原取消悬浮窗后才可以再次点击图片放大，我代码存在什么问题
07-14
根据您提供的代码，我注意到有几个问题可能导致您遇到的问题： 1. 悬浮窗显示在页面底部：这可能是由于计算偏移量时没有考虑到页面滚动的原因。您可以尝试将`scrollTop`的计算方式修改为`scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;`，以确保在不同浏览器中都能正确获取滚动的偏移量。 2. 图片无法再次点击放大：这可能是由于点击事件监听器没有正确设置。目前的代码中，点击悬浮窗时会隐藏弹出窗口，但没有阻止事件冒泡到图片上。您可以尝试添加以下代码来阻止点击事件冒泡： ```javascript popupImg.onclick = function (event) { event.stopPropagation(); }; ``` 这样点击图片时就不会再隐藏弹出窗口了。 希望这些修改可以解决您遇到的问题。如果问题仍然存在，请提供更多的细节，以便我能够更准确地帮助您解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值