关于Google浏览器Unable to preventDefault inside passive event listener due to target being treated as passive.的解决方案
最近写react项目的时候,引用了antd-mobile,在使用滚动组件的时候,发现谷歌浏览器会报以下警告
最初我以为是antd-mobile的问题导致的,然后我就无查看了之前的vue的项目,发现了类似的问题,这是为什么呢?
更具这篇文章https://developers.google.cn/web/updates/2017/01/scrolling-intervention找到了答案
由于浏览器必须要在执行事件处理函数之后,才能知道有没有掉用过 preventDefault() ,这就导致了浏览器不能及时响应滚动,略有延迟。 所以为了让页面滚动的效果如丝般顺滑,从 chrome56 开始,在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认为是 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。 举例:
wnidow.addEventListener('touchmove', func) 效果和下面一句一样
wnidow.addEventListener('touchmove', func, { passive: true })
这就导致了一个问题: 如果在以上这 3 个元素的 touchstart 和 touchmove 事件处理函数中调用 e.preventDefault() ,会被浏览器忽略掉,并不会阻止默认行为。
那么如何解决这个问题呢?不让控制台提示,而且 preventDefault() 有效果呢?
两个方案:
1、注册处理函数时,用如下方式,明确声明为不是被动的
window.addEventListener('touchmove', func, { passive: false }) 2、应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为,但是 touch 事件照样触发。
这里是touch-action 的详细解释https://w3c.github.io/pointerevents/#the-touch-action-css-property
关于Google浏览器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 ...
- Unable to preventDefault inside passive event listener due to target being treated as passive 怎么办?
本篇为转载,原文链接:https://blog.csdn.net/lijingshan34/article/details/88350456 翻译一下:chrome 监听touch类事件报错:无法被动 ...
- [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?
使用滚动时候,新版google浏览器,会弹出如下的警告. 解决方法,可以加上* { touch-action: none; } 这句样式去掉. 其原因:https://developers.googl ...
- 滑动报 Unable to preventDefault inside passive event listener due to target being treated as passive 的解决方法
google浏览器滑动出现以下问题: 解决办法如下:在html元素下添加样式 touch-action: none; html{ touch-action:none; }
- 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 }) ...
随机推荐
- springboot(五) 加载配置文件优先级顺序
github代码地址:https://github.com/showkawa/springBoot_2017/tree/master/spb-demo/spb-brian-query-service ...
- centos 7添加快捷键
转自:http://www.cnblogs.com/flying607/p/5730867.html centos7中不自带启动终端的快捷键,可以自定义添加. 点击右上角的用户名,点击设置,在设置面板 ...
- 关于浮动与清浮动 float
浮动常见的几种属性值 float {left; right; none; } 主要是定义元素朝哪个方向浮动: 元素浮动后的特性 在一行显示,父级的宽度放不下,自己折行: 支持宽高等样式: 不设置 ...
- NDK(10)Android.mk各属性简介,Android.mk 常用模板--未完
参考 : http://blog.csdn.net/hudashi/article/details/7059006 1. Android.mk简介 Android.mk文件是GNU Makefile的 ...
- 转 Dockerfile 常用指令 - 每天5分钟玩转 Docker 容器技术(16)
是时候系统学习 Dockerfile 了. 下面列出了 Dockerfile 中最常用的指令,完整列表和说明可参看官方文档. FROM指定 base 镜像. MAINTAINER设置镜像的作者,可以是 ...
- [转]Open Data Protocol (OData) Basic Tutorial
本文转自:http://www.odata.org/getting-started/basic-tutorial/ Basic Tutorial The Open Data Protocol (ODa ...
- [POJ1509]Glass Beads 后缀自动机 最小循环串
题目链接:http://poj.org/problem?id=1509 题目意思就是求循环字符串的最小表示. 我们用字符串S+S建立SAM,然后从root开始走n步,每次尽量选最小的. 由于 SAM ...
- LoadRunner 11中Record无法自动生成脚本——解决办法
[问题描述] 安装loadRunner 11, 使用IE为默认浏览器,打开一个页面进行脚本录制:录制完成后,无法生成脚本. [问题现象] 控制台输出如下: ****** Start Log Messa ...
- java 之冒泡排序
冒泡排序:可以想象成煮开水,气泡在瓶底的时候是比较小的,到达水面的时候达到最大. 冒泡排序的思想:先确定是升序还是降序,这里升序为例.每两个相邻的数字进行比较,前一个数字比后面一个数字大,就将两个数字 ...
- Apache Tomcat 之路(二 部署web 应用程序)
1.创建一个webapplication,不论是解压的应用程序包还是war包,在tomcat 上都能部署,这里提供一个简单的web项目:git地址:https://github.com/coderxi ...