【解决】addEventListener监听滚动与removeEventListener移除监听阻止冒泡（e.preventDefault()）不生效

【问题】

使用addEventListener监听滚动来阻止冒泡（e.preventDefault()），removeEventListener移除监听阻止冒泡（e.preventDefault()），但未生效。

错误代码示例如下：

// 在 onMounted 钩子中监听
document.body.addEventListener('touchmove', function(e) {e.preventDefault()
}, { passive: false })

// 在 onBeforeUnmount 钩子中移除监听
document.body.removeEventListener('touchmove', function(e) {e.preventDefault()
}, { passive: false })

【解决】

正确代码示例如下：

先把e.preventDefault()单独写一个方法

const noScroll = (e) => {e.preventDefault()
}

然后把noScroll方法当作addEventListener及removeEventListener的第二个参数

// 在 onMounted 钩子中监听
document.body.addEventListener('touchmove', noScroll, { passive: false })

// 在 onBeforeUnmount 钩子中移除监听
document.body.removeEventListener('touchmove', noScroll, { passive: false })

注：第三个参数passive默认值为false，但是chrome, Firefox等浏览器为了保证滚动时的性能，在Window,、Document、 Document.body上针对 touchstart 和 touchmove 事件将passive默认值改为了true。
详细可参考：
EventTarget.addEventListener()
EventTarget.removeEventListener

【解决】addEventListener监听滚动与removeEventListener移除监听阻止冒泡（e.preventDefault()）不生效相关推荐

js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载...
js添加事件.移除事件.阻止冒泡.阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 01 var addEvent = ...
【Flutter】监听滚动动作控制组件透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )
文章目录前言一.移除顶部状态栏空白二.帧布局组件三.透明度组件四.监听滚动事件五.完整代码示例六.相关资源前言在上一篇博客 [Flutter]Banner 轮播组件 ( flutte ...
js如何监听元素事件是否被移除_JS移除事件监听的方法 .removeEventListener( )
JS用addEventListener添加事件监听方法后,可以用removeEventListener来解除监听: element.removeEventListener(event, myFunct ...
vue监听滚动事件实现某元素吸顶或者固定位置显示
vue监听滚动事件实现某元素吸顶或者固定位置显示最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果.即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示. 1.监听滚动事件 ...
页面滚动到某一位置吸顶_vue监听滚动事件某元素吸顶或固定位置显示详解
本文主要为大家详细介绍了vue实现某元素吸顶或固定位置显示,监听滚动事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 最近写了一个VUE的web app项目,需要实现某个部位 ...
监听滚动事件实现动态锚点
前几天做项目的时候,需要实现一个动态锚点的效果如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...
vue 监听滚动事件之菜单滚动吸顶点击滑动到指定位置点击高亮
###菜单滚动吸顶效果: ###html: <section class="switchModule" id="switchModule">< ...
vue监听滚动事件，实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en">& ...
Vue 设置overflow: auto 后监听滚动距离
overflow: auto 后监听滚动距离 <div class="page-body-inner" @scroll.passive="getScroll($ev ...

【解决】addEventListener监听滚动与removeEventListener移除监听阻止冒泡（e.preventDefault()）不生效

【解决】addEventListener监听滚动与removeEventListener移除监听阻止冒泡（e.preventDefault()）不生效相关推荐

最新文章

热门文章