设置点击事件时Unable to preventDefault inside passive event listener due to target being treated as passive
问题
当使用fastClick.js设置点击事件时,控制台报错:
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
意思是 无法被动监听事件中的默认事件.
preventDefault就是阻止事件的默认事件,如果设置了preventDefault,则form表单不会提交,a链接不会跳转
原因产生
AddEventListenerOptions defaults passive to false. With this change touchstart and touchmove listeners added to the document will default to passive:true (so that calls to preventDefault will be ignored)..
If the value is explicitly provided in the AddEventListenerOptions it will continue having the value specified by the page.
This is behind a flag starting in Chrome 54, and enabled by default in Chrome 56. See https://developers.google.com/web/updates/2017/01/scrolling-intervention
AddEventListenerOptions默认为被动为false。通过此更改,添加到文档中的touchstart和touchmove侦听器将默认为passive:true(以便忽略对preventDefault的调用)。。
如果AddEventListenerOptions中显式提供了该值,则它将继续具有页面指定的值。
这在Chrome 54开始的标志后面,在Chrome 56中默认启用。参见https://developers.google.com/web/updates/2017/01/scrolling-intervention
解决方案
- 添加监听事件选项{passive: false}
window.addEventListener('touch事件',[callback],{passive: false}); - 使用css属性
touch-action: none; 这样任何触摸事件都不会产生默认行为,而且touch事件还会触发
设置点击事件时Unable to preventDefault inside passive event listener due to target being treated as passive的更多相关文章
- Unable to preventDefault inside passive event listener due to target being treated as passive
Unable to preventDefault inside passive event listener due to target being treated as passive 今天在做项目 ...
- 移动端页面滑动时候警告:Unable to preventDefault inside passive event listener due to target being treated as passive.
移动端项目中,在滚动的时候,会报出以下提示: [Intervention] Unable to preventDefault inside passive event listener due to ...
- [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
1.滑动时候警告[Intervention] Unable to preventDefault inside passive event listener due to target being tr ...
- IScroll Unable to preventDefault inside passive event listener due to target being treated as passive
最近两天企业微信下IScroll突然无法滚动了,特别慢,之前好好的,发现主要是有红色的Unable to preventDefault inside passive event listener du ...
- [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
相信如果用谷歌浏览器做移动端页面的时候 用touch事件的时候应该遇到过这个东东吧 documet.addEventListener("touchstart",function() ...
- Unable to preventDefault inside passive event listener due to target being treated as passive 怎么办?
本篇为转载,原文链接:https://blog.csdn.net/lijingshan34/article/details/88350456 翻译一下:chrome 监听touch类事件报错:无法被动 ...
- 关于Google浏览器Unable to preventDefault inside passive event listener due to target being treated as passive.的解决方案
最近写react项目的时候,引用了antd-mobile,在使用滚动组件的时候,发现谷歌浏览器会报以下警告 最初我以为是antd-mobile的问题导致的,然后我就无查看了之前的vue的项目,发现了类 ...
- Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
解决办法: 两个方案:1.注册处理函数时,用如下方式,明确声明为不是被动的window.addEventListener('touchmove', func, { passive: false }) ...
- Unable to preventDefault inside passive event listener due to target being treated as passive?
使用滚动时候,新版google浏览器,会弹出如下的警告. 解决方法,可以加上* { touch-action: none; } 这句样式去掉. 其原因:https://developers.googl ...
- Vue移动端报错[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
解决方法如下 项目方案: 在最外侧添加样式操作 .
随机推荐
- 9、手写一个starter
一.starte详解: 1.starter场景启动器: SpringBoot-starter是一个集成接合器,主要完成两件事: (1).引入模块所需的相关jar包 (2).自动配置各自模块所需的属性 ...
- 6、发送验证码功能(Redis)
一.业务需求: 1.后端随机生成短信验证码,并在服务器端保存一定时间(redis): 2.将短信验证码发给用户: 3.用户输入短信验证码提交后,在后端与之前生成的短信验证码作比较,如果相同说明验证成功 ...
- Vue3 企业级优雅实战 - 组件库框架 - 9 实现组件库 cli - 上
上文搭建了组件库 cli 的基础架子,实现了创建组件时的用户交互,但遗留了 cli/src/command/create-component.ts 中的 createNewComponent 函数,该 ...
- [机器学习] PCA主成分分析原理分析和Matlab实现方法
转载于http://blog.csdn.net/guyuealian/article/details/68487833 网上关于PCA(主成分分析)原理和分析的博客很多,本博客并不打算长篇大论推论PC ...
- Java基础篇——Gui编程
AWT 抽象窗口工具 组件:按钮(button) 文本域(textarea) 标签(label) 容器(container)... Frame窗口 Frame frame = new Frame( ...
- LCD副屏-CPU,内存,时显,日期显示
文章结构: 项目概述 成品预览 项目框架 硬件资料,代码 项目槽点 -项目概述- 以前的旧模块搁置很久没用,最近看到圈子很多倒腾电脑副屏的,咱虽然没钱,但是闲啊,刚好手头有这些东西,开干. 目的: 显 ...
- 解决angular11打包报错Type 'Event' is missing the following properties from type 'any[]': ...Type 'Event' is not assignable to type 'string'
出现这种情况,需要检查一下以下事项 1.ts类型声明和html里写的是否一致 1.1举例如下,子组件代码需要注意事项,子组件调用父组件方法,点击传参给父组件,在父组件触发一些时间,当前this指向是父 ...
- ng-alain组件st表格,实现点击表格行变色,或者渲染变色
实现点击表格行变色 html文件 <st #st [data]="data" (change)="changeClick($event)" [column ...
- 动力节点——day03
接收键盘的输入:1.创建一个键盘扫描器对象 java.util.Scanner s=new Scanner(System.in); 2.接收用户输入s.nextInt(); 静态变量在类加载的时候就分 ...
- Xmake v2.7.6 发布,新增 Verilog 和 C++ Modules 分发支持
Xmake 是一个基于 Lua 的轻量级跨平台构建工具. 它非常的轻量,没有任何依赖,因为它内置了 Lua 运行时. 它使用 xmake.lua 维护项目构建,相比 makefile/CMakeLis ...