首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue2窗口addEventListener滚动不会触发吗?

Vue2窗口addEventListener滚动不会触发的原因是因为Vue2的事件绑定是基于DOM元素的,而窗口滚动事件是绑定在window对象上的。在Vue2中,只有通过Vue实例的$on方法或组件的@scroll事件绑定才能监听到组件内部的滚动事件,而无法直接监听window对象的滚动事件。

解决这个问题的方法是,可以在Vue组件的mounted生命周期钩子中使用原生的JavaScript代码来绑定window对象的滚动事件。具体的实现步骤如下:

  1. 在Vue组件的mounted生命周期钩子中,使用addEventListener方法来绑定window对象的滚动事件,例如:
代码语言:javascript
复制
mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
  1. 在Vue组件的methods中定义handleScroll方法来处理滚动事件,例如:
代码语言:javascript
复制
methods: {
  handleScroll() {
    // 处理滚动事件的逻辑
  },
},

需要注意的是,当组件销毁时,需要使用removeEventListener方法来移除滚动事件的绑定,以避免内存泄漏。可以在Vue组件的beforeDestroy生命周期钩子中进行解绑,例如:

代码语言:javascript
复制
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
},

这样就可以在Vue2中监听到窗口的滚动事件了。

关于Vue2的更多信息和使用方法,可以参考腾讯云的Vue.js产品介绍页面:Vue.js产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

WPF 窗口和控件的 Unloaded 事件什么情况下不会触发

WPF 中如果监听窗口或者控件的的 Unloaded 事件,那么这个事件会触发?答案是不确定的。...// 断点 2 } private void Window_Closed(object sender, EventArgs e) { // 断点 3 } 你觉得以上事件中,断点都会进入?...如果应用程序正在关闭,那么 Unloaded 时间将不会触发。WPF 通过设置在 Application 上的 ShutdownMode 来决定是否在关闭窗口后关闭应用程序。...因此,如果你试图通过在 Unloaded 事件中执行清理操作,那么可能不会如预期般完成。...因此,一般情况下,Unloaded 事件是会触发的,但满足如下任一情况时,此事件将不不会触发: Application.ShutdownMode="OnLastWindowClose" 且最后一个窗口关闭时

35820

面试官:哪些浏览器事件不会冒泡?

你知道哪些浏览器事件不会冒泡?...('scroll', function (e) { console.log('outer scroll') },);此时滚动内层,我们看到并不会触发外层的事件监听:图片而如果设置成捕获监听呢...注意:有个类似滚动事件的叫滚轮事件wheel是可以触发冒泡的( MDN - wheel_event ),我们甚至可以通过额外注册 wheel 监听事件并阻止其冒泡从而让 scroll 事件失效,不过只要滚动条还在...scroll 还是可以不通过滚轮来控制滚动的,所以还记得前面我们怎么让元素滚动起来的?...Media由视频、图像、音频等媒体触发的相关事件,都不会触发冒泡,和 scroll 事件同理,如果需要进行事件委托都必须在捕获阶段去处理。

1.7K20

造一个 react-infinite-scroller 轮子

offset 公式 无限滚动的原理很简单:只要 很长元素总高度 - 窗口距离顶部高度 - 窗口高度 < 阈值 就加载更多,前面那一堆下称为 offset,表示还剩多少 px 到达底部。...还有一个问题:刚进页面的时候,高度为 0,假如此时 offset < threshold 理应触发“加载更多”,然而这个时候用户并没有做任何滚动滚动事件不会触发,“加载更多”也不会触发,这其实并不符合我们的预期...,滚动条的位置不应该还停留在 scrollY = 0 的位置,不然会一直加载更多,比如此时滚动到了顶部: 3 <- 到顶部了,开始加载 2 1 0 加载更多后 6 <- 不应该停留在这个位置,因为会再次触发无限滚动...对 touch 和 mouse 的事件监听不会阻塞页面的滚动,可提高页面滚动性能。详情可见这篇文章。...还有一点,在添加 listener 的时候可以触发一次 listener 作为 initialLoad 向上滚动的时候,在 componentDidUpdate 里要把滚动条设置为上一次停留的地方,否则滚动条会一直在顶部

2.5K30

JavaScript 编程精解 中文第三版 十五、处理事件

某些平台,尤其是 Android 手机上的虚拟键盘,不会触发按键事件。...滚动事件 每当元素滚动时,会触发scroll事件。...innerHeight全局绑定是窗口高度,我们必须要减去滚动条的高度。你点击文档底部的时候是无法继续滚动的。对于窗口高度来说,也存在innerWidth。...实际上,事件处理器是在进行滚动之后才触发的。 焦点事件 当元素获得焦点时,浏览器会触发其上的focus事件。当失去焦点时,元素会获得blur事件。 与前文讨论的事件不同,这两个事件不会传播。...我们可以通过scroll事件监测滚动行为,可以通过focus和blur事件监控焦点改变。当文档完成加载后,会触发窗口的load事件。

5.5K20

webapi(五)- 事件对象

addEventListener第三个参数传入true代表是捕获阶段触发 若传入false代表冒泡阶段触发,默认就是false 若是用 L0 事件监听,则只有冒泡阶段,没有捕获 document.addEventListener...('click' , fn) 滚动事件 当页面进行滚动触发的事件 事件名: scroll 给 window 或 document 添加 scroll 事件 例如:监听整个页面滚动 window.addEventListener...可以修改 获取页面的滚动卷曲距离 document.documentElement.scrollTop window.addEventListener('scroll' , function() {...) clientLeft和clientTop (只读) 获取左边框和上边框宽度 resize 事件 会在窗口尺寸改变的时候触发事件 // resize事件 : 当浏览器大小发生改变的时候会触发该事件 =...resize 窗口大小发生改变

1K20

Threejs入门之二十二:Threejs中的屏幕坐标转标准设备坐标

screen坐标的最大范围是 (screen.width, screen.height),最大值不会超过屏幕分辨率。...pageY:鼠标点击位置相对于网页左上角的垂直平偏移量,也就是 clientY + 垂直滚动滚动的距离。 坐标系上某一个元素的pageX/pageY 不会 随着滚动滚动而改变。...clientX:鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离)。 clientY:鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动的距离)。...*计算这个坐标时,由于是基于浏览器窗口中用来显示网页的可视区域,那么也就是说需要拖动滚动条才能看到的区域不算;当你将浏览器窗口缩小时,clientX/clientY 的最大值也会缩小,但始终,它们的最大值不会超过你浏览器可视区域...offsetX:鼠标点击位置相对于触发事件对象的水平距离。 offsetY:鼠标点击位置相对于触发事件对象的垂直距离。

2.1K10

vue上拉加载更多组件

整个页面的高度减去可视窗口的高度再减去滚动条移动的距离,当接近0的时候就是到达底部的时候。 明白了这个原理上拉加载就很好实现了。...data: windowHeight: '',contentOffSetHeight: '',downT: '' 因为可视窗口和距离顶部的距离是不会变的,所以初始化的时候就赋值,downT是监听滚动防抖用的...this.contentOffSetHeight = document.getElementById('scroll').offsetTop;//容器距离顶部高度window.addEventListener...('scroll', this.onScroll); 这边可视窗口采用了兼容的写法,然后history.scrollRestoration这个可以去了解一下,就是不记住滚动的距离,刷新的时候就不会直接触发加载方法...clientHeight;//容器高度 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//窗口滚动条高度

2K10

函数防抖与函数节流

前言 有一些浏览器事件我们不希望它很频繁的触发,如调整窗口大小(onresize)、监听滚动滚动(onscroll),如果这些监听事件需要调用接口的话一秒内可能会调用上百次,这样坑定是有问题的。...函数防抖(debounce) 如果有人进电梯(触发事件),那电梯将在10秒钟后出发(执行事件监听器),这时如果又有人进电梯了(在10秒内再次触发该事件),我们又得等10秒再出发(重新计时)。...setTimeout(()=>{ fn() },wait) } } function log(){ console.log(1) } window.addEventListener...如果页面很长,我们一直在滚动页面,那log方法就一直不会被执行。所以我们可以升级一下上述的防抖方法。...fn(); },wait); } } } function log(){ console.log(1) } window.addEventListener

16220

JS快速入门(二)

(type, listener, useCapture) type:事件类型 listener: 监听器(处理程序) useCapture: 默认为 false,设置为 true 时,不会因冒泡触发监听器...窗口事件在浏览器窗口发生变化时触发,其中包括窗口大小更改,加载窗口,关闭窗口窗口滚动等,掌握如何处理窗口事件可以帮助我们实现更加丰富的交互效果; 常用窗口事件 方法 说明 load 当整个页面及所有依赖资源...一些浏览器实现仅在框架或内置框架接收到用户手势或交互时才显示对话框 resize 窗口大小改变时触发 scroll 元素内发生滚动触发 load事件示例 /* 输出 div...,获取可视窗口宽高 */ window.addEventListener("resize", function (e) { console.log(window.innerWidth) //...可视窗口宽 console.log(window.innerHeight) // 可视窗口高 }) scroll 事件代码示例 常用于检测滚动滚动距离 /* 获取滚动条垂直滚动距离

6.5K30

学会一行CSS即可提升页面滚动性能

重点来了,既然该属性可以阻止元素成为鼠标事件,那么修改页面该属性值为 none,就能避免在滚动时鼠标频繁触发包括hover在内的任何鼠标事件,从而提升了页面滚动时的性能。...body { pointer-events: none;}使用滚动监听事件可实现灵活控制:let timer = nullwindow.addEventListener("scroll", function...// 或 auto});可能有的朋友就会问了,如果我们在 touchstart 或 touchmove 事件中用 event.preventDefault() 阻止系统默认事件,不就可以阻止手势操作?...window.addEventListener('touchmove', e => e.preventDefault()) // 无效,并报错window.addEventListener('touchmove...,preventDefault() 也不会影响到触摸的事件,这两者可以结合来使用。

3.1K30

QQ空间缓存图片_QQ空间原图

今天偶然打开PC端QQ空间时,我发现了一种似乎更好的方式 —— 鼠标移入时在范围内上下滚动图片预览,移出时停止滚动。...offsetParent (获取父元素)); dom.getBoundingClientRect() :它有四个常用值:left、top、right、bottom,分别是相对于当前视口(即此tab网页窗口左侧...、顶部、右侧、底部)的位置; dom.scrollHeight :scroll系的API,用来获取元素的真实高度(同系的还有scrollWidth/scrollLeft/scrollTop ),一般不会用它来作用于图片上...) 相对的两个 outerWidth 和 outerHeight ,用于获取加上工具条与滚动窗口的宽度与高度; 顺便说一句,像 img.getBoundingClientRect().top...本来这里笔者想采用伪元素的方式:用 ::before 和 ::after 占位并触发事件,但是在查遍资料以后我突然想到一件事:不是经常说伪元素的优势是脱离文档流?那还如何能够获取到?

6.3K20

什么是 JavaScript 事件?

事件可以与网页上的元素相关联,例如按钮、链接、输入框等,也可以与整个文档或浏览器窗口相关联。当事件被触发时,可以执行预定义的JavaScript函数或代码块,以响应事件并执行相应的操作。...(scroll): 1:点击事件(click): 点击事件在用户点击一个元素时触发。...; } }); 4:表单事件(submit、change): 表单事件在用户提交表单或更改表单元素的值时触发。... window.addEventListener("load", function() { alert("页面加载完成!")...; }); 6:页面滚动事件(scroll): 页面滚动事件在用户滚动网页时触发。你可以使用该事件来实现与页面滚动相关的效果,如导航栏的固定位置或懒加载图片等。

19320

知识点 | JavaScript事件浅析

捕获就是从body开始到你触发事件的节点,从外到内的一个过程。 冒泡呢,与之相反,从你触发的节点开始,一级一级往外,直到body,是一个从内到外的过程。 那么他们两个是同时进行的?...在addEventListeneraddEventListener(event事件名称,function回调函数,是否在捕获或冒泡阶段执行)第三个参数可以改变事件触发时机。...scroll 滚动的时候触发,无限滚动之类的一些效果 resize 放大缩小窗口的时候发生变化,和上面的scroll都需要注意去抖, 鼠标事件 传送门,去看鼠标事件 click 单击事件,在DOM上单击鼠标时候触发...当你使用输入法的时候会触发一下 compositionupdate 在向输入字段中插入新字符时触发。 compositionend 在IME的文本复合系统关闭时触发,表示返回正常键盘的输入状态。...控件事件 input 当内容发生改变的时触发,有可能是代码触发的改动兼容ie的话input propertychange change 当失去焦点时,内容改变触发 blur 失去焦点触发 focus 获得焦点触发

1.2K30

DOM事件基本概念大总结(前端必备)

同时 DOM明确规定 事件捕获阶段不会处理事件 处于目标阶段属于冒泡阶段的一部分,并且会触发事件。...这样就不会触发 father 了 } 当然该方法同样可以阻止捕获,不过前提是绑定事件时指定他在捕获阶段触发。...(event) { console.log(event.target, '跳转了'); }) resize 事件 当页面大小发生改变时触发,可以用此来获取一些窗口属性,用来做响应式开发。...doc.addEventListener('mouseout', function() {console.log('开始')} ) 滚轮 mousewheel 可用于获取该事件发送时鼠标属性,在任何元素上通过鼠标滚动即可触发...若该事件改变了内容将不会在发生其他事件,否则可以发生 down、up、click 事件 mousemove 也会触发 mouseenter 和 mouseout 手指滚动页面时会触发 mousewheel

1.8K20

实现图片懒加载

添加页面滚动监听事件 window.addEventListener('scroll', _delay, false); function _delay() { clearTimeout(delay...依据就是判断该图片是否在当前窗口的可视区域内,在这里我们封装一个_isShow函数来实现 function _isShow(el) { var coords = el.getBoundingClientRect...window.innerHeight || document.documentElement.clientHeight) + parseInt(offset)); } 自此一个图片加载的闭环就形成了 当网页滚动的事件被触发...如此简单,不妨扩展一下 添加一些自定义参数,谁都喜欢自定义,不是? 支持iScroll, iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件。...('scrollEnd', _delay); } else { window.addEventListener('scroll', _delay, false); } } ImageLazyload.prototype.getNode

1.4K40

JavaScript基础

事件的绑定:addEventListener()通过这个方法也可以为元素绑定响应函数 参数: 事件的字符串,不要on 回调函数,当事件触发时该函数会被调用 是否在捕获阶段触发事件,需要一个布尔值...,一般都传false 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,这样当事件被触发时,响应函数将会按照函数的绑定顺序执行 这个方法不支持IE8及以下的浏览器...()相反 事件的传播 捕获阶段 在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件 目标阶段 事件捕获到目标元素,捕获结束开始在目标元素上触发事件...冒泡阶段 事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件 如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true一般情况下我们不会希望在捕获阶段触发事件.../* * onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动触发

1.9K20
领券