最近写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.的解决方案的更多相关文章

  1. 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 今天在做项目 ...

  2. 移动端页面滑动时候警告:Unable to preventDefault inside passive event listener due to target being treated as passive.

    移动端项目中,在滚动的时候,会报出以下提示: [Intervention] Unable to preventDefault inside passive event listener due to ...

  3. [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 ...

  4. IScroll Unable to preventDefault inside passive event listener due to target being treated as passive

    最近两天企业微信下IScroll突然无法滚动了,特别慢,之前好好的,发现主要是有红色的Unable to preventDefault inside passive event listener du ...

  5. Unable to preventDefault inside passive event listener due to target being treated as passive 怎么办?

    本篇为转载,原文链接:https://blog.csdn.net/lijingshan34/article/details/88350456 翻译一下:chrome 监听touch类事件报错:无法被动 ...

  6. [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() ...

  7. Unable to preventDefault inside passive event listener due to target being treated as passive?

    使用滚动时候,新版google浏览器,会弹出如下的警告. 解决方法,可以加上* { touch-action: none; } 这句样式去掉. 其原因:https://developers.googl ...

  8. 滑动报 Unable to preventDefault inside passive event listener due to target being treated as passive 的解决方法

    google浏览器滑动出现以下问题: 解决办法如下:在html元素下添加样式 touch-action: none; html{ touch-action:none; }

  9. 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 }) ...

随机推荐

  1. springboot(七) 配置嵌入式Servlet容器

    github代码地址:https://github.com/showkawa/springBoot_2017/tree/master/spb-demo/spb-brian-query-service ...

  2. 递推DP UVA 590 Always on the run

    题目传送门 题意:题意难懂,就是一个小偷在m天内从城市1飞到城市n最小花费,输入的是每个城市飞到其他城市的航班. 分析:dp[i][j] 表示小偷第i天在城市j的最小花费.状态转移方程:dp[i][j ...

  3. 贪心/思维题 Codeforces Round #310 (Div. 2) C. Case of Matryoshkas

    题目传送门 /* 题意:套娃娃,可以套一个单独的娃娃,或者把最后面的娃娃取出,最后使得0-1-2-...-(n-1),问最少要几步 贪心/思维题:娃娃的状态:取出+套上(2),套上(1), 已套上(0 ...

  4. JEECMS9.3集成dubbo操作记录

    需求描述: 门户及其他应用系统需要查询JEECMS9.3中发布的栏目及数据,而其他系统都是基于dubbo开发的,因此想要将JEECMS9.3中集成dubbo并对外提供内容管理服务. 需求实现: 1.添 ...

  5. selenium 延迟等待的三种方式

    1.最直接普通的方式:这个是设置固定的等待时间    Thread.sleep(1000);   2.显示等待方式(Explicit Wait):就是明确的要等待的元素在规定的时间之内都没找到,那么就 ...

  6. 从0开始的hbase

    2016马上要结束了,回顾一下这一年对hbase的学习历程. 1,年初hbase的状态 使用场景:主要是用来存储业务线的mysql表,增量同步到hbase,然后每天晚上全量导入hdfs做离线计算. h ...

  7. 工作记录:JS正则表达式 angularjs ng-if ng-show ng-switch

    用了一下JS 正则表达式判断密码,很简单 学习了angularjs的ng-if ng-show ng-switch的区别并使用 https://www.cnblogs.com/54td/p/59743 ...

  8. vba,设置,excel,wps ,页面设置

    全面认识页面设置之 PageSetup 对象我们在写 VBA 代码时,特别是做小型程序开发时,经常会用 VBA 来设置“页面设置”中的选项,还可用要用 VBA 来实现一些特殊的效果,这就需要使用 Pa ...

  9. 手机酷派4G5316 5313s 黑砖 求转成功 9008端口 9006端口 少走弯路选对镜像

    首先要有资料 里面有教程  http://pan.baidu.com/s/1bpjxP6n 1.用其他手机 or u 盘往sd卡放进“强制进入下载模式的文件” 2. 驱动 3.刷机工具 下载镜像   ...

  10. nginx php 配置模板

    server {     listen 80;     server_name    www.xxx.com;     #access_log     logs/www.xxx.com.access. ...