Unable to preventDefault inside passive event listener due to target being treated as passive 怎么办?
本篇为转载,原文链接:https://blog.csdn.net/lijingshan34/article/details/88350456
翻译一下:chrome 监听touch类事件报错:无法被动侦听事件preventDefault,是新版本chrome 浏览器报错。
说明:说一下这个 preventDefault()是个什么鬼,这个是取消默认事件的,如果这个函数起作用的,比如默认的表单提交,a链接的点击跳转,就不好用了。
原因:google浏览器为了最快速的相应touch事件,做出的改变。
历史:当浏览器首先对默认的事件进行响应的时候,要检查一下是否进行了默认事件的取消。这样就在响应滑动操作之前有那么一丝丝的耽误时间。
现在:google就决定默认取消了对这个事件的检查,默认时间就取消了。直接执行滑动操作。这样就更加的顺滑了。
但是浏览器的控制台就会进行错误提醒了。
具体情况:
从 chrome56 开始,在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认为是 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。
导致下面的效果一致:
wnidow.addEventListener('touchmove', func) 效果和下面一句一样
wnidow.addEventListener('touchmove', func, { passive: true })
这样会出现新的问题:
如果在以上这 3 个元素的 touchstart 和 touchmove 事件处理函数中调用 e.preventDefault() ,会被浏览器忽略掉,并不会阻止默认行为。
各位亲人们可以测试一下:
body {
margin: 0;
height: 2000px;
background: linear-gradient(to bottom, red, green);
} // 在 chrome56 中,照样滚动,而且控制台会有提示,blablabla
window.addEventListener('touchmove', e => e.preventDefault())
那么我们这些小程序员该怎么办呢???
可以做到:
即不让控制台提示,而且 preventDefault() 有效果呢?
两个方案:
1、注册处理函数时,用如下方式,明确声明为不是被动的
window.addEventListener(‘touchmove’, func, { passive: false })
2、应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为,但是 touch 事件照样触发。
touch-action 还有很多选项,
详细请参考:touch-action
————————————————
版权声明:本文为CSDN博主「李景山-编程者」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/lijingshan34/article/details/88350456
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() ...
- 关于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.
解决方法如下 项目方案: 在最外侧添加样式操作 .
随机推荐
- python 逗号分隔值文件的操作
- BZOJ 4034 洛谷3178 树上操作题解
一个很裸的树链剖分模板.注意一下数据范围,有的地方要开longlong,这就是唯一的陷阱了. # include<iostream> # include<cstdio> # i ...
- ACK容器服务发布virtual node addon,快速部署虚拟节点提升集群弹性能力
在上一篇博文中(https://yq.aliyun.com/articles/647119),我们展示了如何手动执行yaml文件给Kubernetes集群添加虚拟节点,然而,手动执行的方式用户体验并不 ...
- redis :read error on connection
最近做了一个多人竞拍的小功能 因为以前没做过 所以踩了很多坑用的是 mysql + php + redis 实现的竞拍功能 这里先说一下踩得第二个坑redis 的原因 真是欲哭无泪 解决完一个 ...
- 如何用django框架完整的写一个项目
实现目标及功能,增删改,并且实现搜索,分页,日期插件,删除提示,以及批量导入等功能 软件版本: python3.5 django1.11 一 用pycharm创建一个项目,名字自定义 二 编辑url ...
- python3中的zip函数
zip函数的作用: zip函数接受任意多个可迭代对象作为参数,将对象中对应的元素打包成一个tuple,然后返回一个可迭代的zip对象. 这个可迭代对象可以使用循环的方式列出其元素 若多个可迭代对象的长 ...
- c++中单引号和双引号的区别
在C++中单引号表示字符,双引号表示字符串. 例如 :在定义一个数组的时候string a [5]={"nihao","henhao","good&q ...
- 伪静态的实现方法:IIS环境下配置
URL 静态化可以提高搜索引擎抓取,开启本功能需要对 Web 服务器增加相应的 Rewrite 规则,且会轻微增加服务器负担.本教程讲解如何在 IIS 环境下配置各个产品的 Rewrite 规则. 下 ...
- laravel 5.5 登录验证码 captcha 引入
https://blog.csdn.net/u013372487/article/details/79461730 前提: 开启Laravel 的用户认证功能 1.安装 Captcha 安装 Capt ...
- 【BestCoder Round #93 1002】MG loves apple
[题目链接]:http://acm.hdu.edu.cn/showproblem.php?pid=6020 [题意] 给你一个长度为n的数字,然后让你删掉k个数字,问你有没有删数方案使得剩下的N-K个 ...