新版chrome touch警告处理办法
最近做项目经常在 chrome 的控制台看到如下提示:
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
于是 Google 了一番,找到这篇文章,有了详细解释。Making touch scrolling fast by default
简而言之:
由于浏览器必须要在执行事件处理函数之后,才能知道有没有掉用过 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() ,会被浏览器忽略掉,并不会阻止默认行为。
测试:
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
[注]未来可能所有的元素的 touchstart touchmove 事件处理函数都会默认为 passive: true
新版chrome touch警告处理办法的更多相关文章
- 开发机上绕过Chrome同源策略的办法
开发机上绕过Chrome同源策略的办法 标签: Chrome同源策略跨域 2013-08-21 18:33 6071人阅读 评论(0) 收藏 举报 分类: Chrome扩展(1) 版权声明:本文为 ...
- 支持新版chrome,用webstorm编译形成css和sourcemap,调试sass和less源文件(转)
旧版的chrome有个support for sass,但是新版chrome没有这个功能了.看到网上提供的方法比较多,也很乱,旧版新版的都有.而且不能指定自己所需要的路径. 所以就做了下改版. sas ...
- 转发:在开发机上绕过Chrome同源策略的办法
在开发机上绕过Chrome同源策略的办法 标签: Chrome同源策略跨域 2013-08-21 18:33 4399人阅读 评论(0) 收藏 举报 分类: Chrome扩展(1) 版权声明:本文为博 ...
- 最新版chrome浏览器如何离线安装crx插件?(转载)
原文链接:https://newsn.net/say/chrome-crx-offline.html mac新版chrome开启离线插件安装 对于mac新版chrome,注意,大家一定要按照顺序来.m ...
- Apple Mach-O Linker Warning 警告解决办法
此警告解决办法: 项目名字 -> targets -> Build Settings -> search path
- autocomplete="off" 在新版chrome中不起作用
autocomplete="off" 在新版chrome中不起作用,还是自动填充了 用户名和密码,改为 autocomplete="new-password" ...
- 新版Chrome自动禁用第三方插件的解决办法[转]
原文地址:http://www.douban.com/note/375734834/?type=like Chrome的新策略里面禁用了除chrome web store下载的所有第三方扩展,这个很烦 ...
- HTTPS页面使用CNZZ统计代码,Chrome显示警告怎么办?
很多站长会遇到一个问题,网站加入CNZZ的JS统计代码后,Chrome浏览器出现警告:阻止跨站解析器阻断脚本通过document.write调用(A parser-blocking, cross si ...
- 自签https证书2(适配新版chrome,不会显示“不安全”)
上一篇博文中介绍了自签https的方法,但是在新版的chrome中会出现这么一个问题:自签ca可以识别,但是证书仍然会判断不安全.为了解决这个问题,博主特地又查了好多资料,终于找到了解决方案. 当然, ...
随机推荐
- Codeforces431C_K-Tree_KEY
题目传送门 题目大意:给定一棵K叉树,一个节点下的K个节点的分数为i,求包含大于等于D的边的总分数为N的方案总数,mod 1e9+7. 这是一道很好的树形DP题,首先看N和K两个条件,可以轻易的得到方 ...
- 北京Uber优步司机奖励政策(2月2日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- c++ 重载运算与类型转换
1. 基础概念 重载的运算符是具有特殊名字的函数:(重载运算符函数,运算符函数.重载运算符) 依次包含返回类型,函数名(operator=),参数列表,函数体. 只有重载的函数调用运算符operato ...
- CLR via c#读书笔记九:字符、字符串和文本处理
1.在.NET Framework中,字符总是表示成16位unicode代码值(关于unicode.utf8等可以到http://www.ruanyifeng.com/blog/2007/10/asc ...
- CSS随笔3
1. CSS部分简洁使用 * background-radious:使得边框角“圆化”. * background:pink url(“图片路径”) no-repeat: * border 可以有 ...
- MySQL☞关联查询
关联查询:所需要的数据来源于多张表,通过表的连接查询(关联查询)来查询多张表中的数据 格式: select 别名1 . */列名 , 别名2 . */列名 from 表名1 别名1 , 表名2 别 ...
- Django - day00 第一个页面
Django - day00 0.写在最前面 第一次接触Django,是在大三的做数据库课程设计的时候,当时好像还是1.8的版本,现转眼就到了2.0的版本. 当时由于没太多的课,仅花了不到一周的时间就 ...
- Java开发工程师(Web方向) - 04.Spring框架 - 第5章.Web框架
第5章--Web框架 Web框架概述 Web框架单元测验 本次得分为:13.50/15.00, 本次测试的提交时间为:2017-09-25 1单选(2分) 关于Spring MVC中Dispatche ...
- Python 作用域和命名空间
在介绍类之前,我首先要告诉你一些Python的作用域规则.类定义对命名空间有一些巧妙的技巧,你需要知道作用域和命名空间如何工作才能完全理解正在发生的事情.顺便说一下,关于这个主题的知识对任何高级Pyt ...
- Python全栈 Web(边框、盒模型、背景)
原文地址 https://yq.aliyun.com/articles/634926 ......................................................... ...