解决移动端的滑动事件总是出现无法侦听被动事件？

最新推荐文章于 2025-02-06 01:24:44 发布
原创 最新推荐文章于 2025-02-06 01:24:44 发布 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#j #phone

使用 swiper.js jquerymobile.js 等移动端js库的时候，如果使用了滑动事件，不时会看到报错：“
Unable to preventDefault inside passive event listener due to target being treated as passive”。但奇怪的是脚本运行正常，

解决方法
css中加上这句* { touch-action: none; }一般就可以了

你不知道的passive event listener-让移动端滑动体验起飞（优化页面滑动）
codingWeb的博客
08-07 1029
优化前和优化后的对比 事情的起因是在腾讯面试的时候被问到了，被吊打了，自闭了，想想也不冤，因为以前确实从来没碰到过这样的问题，如果以前碰到过还回答不出来，我就去撞墙了 先来个场景： <script type="text/javascript"> document.addEventListener("touchstart", function(e){ e.preventDefault() }) </script> 当你去测试时： 报错了：Unable t
最全面、最详细web前端面试题及答案总结
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
前端刚实习的一些建议(包含一些问题的解决：移动端滑动监听不灵敏，video层级过高)
weixin_42158320的博客
11-12 715
自己刚实习，也算完整的做了一个项目，我感觉在项目中更多的是熟悉公司的业务逻辑，每个公司都有自己的一套构建方案，也有自己的环境，比如测试环境，预发布环境等等。 写这个 ...
如何解决移动端的滑动事件总是出现无法侦听事件
lsk_xs的博客
11-19 436
报错内容： Unable to preventDefault inside passive event listener due to target being treated as passive 由于目标被视为被动，因此无法防止被动事件侦听器中的默认值 解决方案： *{ touch-action: none; }
因touch-action: none;得mescroll
小猿猪哥的博客
03-01 2517
最近在帮一个朋友做一个贷款类的H5应用，有页面需要上下拉刷新，每个item点击还可以进入详情。由于使用的是SUI Mobile 框架，导致a标签跳转不成功，且谷歌浏览器调试打印如下警告提示：Unable to preventDefault inside passive event listener due to target being treated as passive？。网上给的答案是加上*...
多个onscroll事件解决
水中熊的博客
09-25 1467
今天遇到个问题，为首页做回到顶部按钮，做完后页面却显示不出来了，想了半天才发现，原来我首页以前是用懒加载onscroll事件，而回到顶部按钮也是用到了onscroll事件，结果是只执行了后一个事件，前一个被替换了，上网查到了一个解决方法： 如果一个页面出现多个window.onscroll=function(){...}后果是只有最后一个正常运行。 解决方法可以使用jquery $(
解决 [Violation] Added non-passive event listener to a scroll-blocking ‘wheel‘ event 警告
最新发布
有来技术
02-06 5882
浏览器警告 Added non-passive event listener 可能导致滚动卡顿。使用 { passive: true } 优化事件监听，提高页面流畅度，并通过 default-passive-events 解决 wheel、touchstart 等事件的阻塞问题。 🚀
ESP32视频流延迟高怎么办？网络带宽分配与帧率控制的6种优化手段
![ESP32视频流延迟高怎么办？...# 1.... 在基于ESP32的实时视频传输系统中，延迟问题往往由多因素耦合导致。首要根源在于其有限的处理能力与资源分配机制：ESP32采用双核Xtensa架构，但视频采集、编码与网络发送若集中于...
前端面试题整合
qq_29715077的博客
08-08 1591
如果不存在则会创建对应会话信息，生成对应session，并将对应sessionid返回给客户端，客户端接受到这个sessionid，把它存贮起来，下一次发送请求的时候，附带把这个session一起发送给服务端，服务端只要根据这个sessionid就知道是谁，而这个sessionid就是这次会话生命周期的凭证，服务端可以设置session过期时间，一但客户端丢失sessionid或者是服务端设置了失效时间，那这次会话结束。执行遗弃时，需要根据影响的范围而指定不同的参数，可以指定是否复原索引或工作树内容。
面试题总汇
wx25051的博客
11-03 4419
一. FTP/TFTP/NFS 1.FTP的传输模式：ASCII传输模式和二进制传输模式。 ASCII传输模式： 假定用户正在拷贝的文件包含的简单ASCII码文本，如果在远程机器上运行的不是UNIX，当文件传输时ftp通常会自 动地调整文件的内容以便于把文件解释成另外那台计算机存储文本文件的格式。但是常常有这样的情况，用户正在传输的文件包含的不是 文本文件，它们可能是程序，数据库，字处理文件或者压缩文件（尽管字处理文件包含的大部分是文本，其中也包含有指示页尺寸，字库 等信息的非打印符）。在拷贝任何非文本文
JS监听页面滚动事件无效解决方案
xiaomao_wxj的博客
04-12 7080
window.addEventListener事件踩坑 1、在项目中使用window.addEventListener(“scroll”, this.handleFixedTop);事件监听无效解决方案： window.addEventListener("scroll", this.handleFixedTop,true); 使其在事件捕获的时候触发，该值默认为false(事件冒泡) 2、const scrollT = document.documentElement.scrollTop; 获取不到s
[小程序之菜鸟填坑-1]Passive Event Listeners —— 被动事件监听器
JS灭霸
11-23 1万+
Passive Event Listeners 问题 被动事件监听器 在写webapp页面的时候，Chrome 提醒 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make th...
chrome 监听touch类事件报错：无法被动侦听事件preventDefault
weixin_34214500的博客
11-28 789
先上错误信息： Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/... 一个简单的页面只有这么段js document.addEve...
web前端：Unable to preventDefault inside passive event listener invocation的产生原因及解决
热门推荐
zctsir的博客
04-16 4万+
产生原因： 条件1：使用监听事件时候，第三个参数配置了passive为true(说明指定了这个监听为一个被动监听) window.addEventListener("touchmove", handler, { passive: true }); 条件2：上条件中的被动监听的handler中调用了 function handler() { //阻止默认事件，如点击&l...
控制台： [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event
weixin_34403976的博客
11-04 1万+
谷歌控制台 提示： [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive 翻译 违反：没有添加被动事件监听器来阻止’touchs...
使用MUI框架总是报Unable to preventDefault inside passive event listener due to target being treated as pass
berry199462的博客
10-16 5052
因为最新的chrome（其中包括现在市面上近几年出的安卓机子）给这个preventDefault返回了naive，不再是清除浏览器默认行为了了。 其中mui.min.js里面涉及46处地方，未压缩版本有57个左右，JQ中包含10个的样子 现只能通过以下几个属性粗略的代替原来需要的效果： event.cancelable 浏览器默认行为是否可以被禁用 event.defaultPrevente...
Passive Event Listeners——让页面滑动更加流畅的新特性
anminyao3477的博客
12-08 416
Passive Event Listeners - 被动事件监听器 在写webapp页面的时候，Chrome 提醒　 code 1 <code>[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider ma...
[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event. Consider marki
weixin_47181907的博客
06-15 3094
警告信息如下：[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive. 解决办法：1、直接在项目终端下载安装npm install default-passive-events 2、在main.js中引入就可以了import "defaul
Dojo事件处理：侦听器与发布/预定通信解析
"Dojo基础2事件侦听器" Dojo是一个强大的JavaScript库，它提供了丰富的功能，包括事件处理机制。事件侦听器是Dojo中处理网页交互的关键部分，允许开发者响应用户的动作，如点击、键盘输入等。Dojo不仅实现了W3C标准...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值