vue运行报错--preventDefault

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

解决方法:

方法一
在touch的事件监听方法上绑定第三个参数{ passive: false },
通过传递 passive 为 false 来明确告诉浏览器:事件处理程序调用 preventDefault 来阻止默认滑动行为。

elem.addEventListener(
  ‘touchstart‘,
  fn,
  { passive: false }
);

方法二

 * { touch-action: pan-y; }
 使用全局样式样式去掉

Passive event listeners

2016年Google I/O上提出的概念,目的是用来提升页面滑动的流畅度。

For instance, in Chrome for Android 80% of the touch events that block scrolling never actually prevent it. 10% of these events add more than 100ms of delay to the start of scrolling, and a catastrophic delay of at least 500ms occurs in 1% of scrolls.

在 Android 版 Chrome 浏览器的 touch 事件监听器的页面中,80% 的页面都不会调用 preventDefault 函数来阻止事件的默认行为。在滑动流畅度上,有 10% 的页面增加至少 100ms 的延迟,1% 的页面甚至增加 500ms 以上的延迟。

由于浏览器无法预先知道一个事件处理函数中会不会调用 preventDefault(),它需要等到事件处理函数执行完后,才能去执行默认行为,然而事件处理函数执行是要耗时的,这样一来就会导致页面卡顿,也就是说,当浏览器等待执行事件的默认行为时,大部分情况是白等了。

如果 Web 开发者能够提前告诉浏览器:“我不调用 preventDefault 函数来阻止事件事件行为”,那么浏览器就能快速生成事件,从而提升页面性能,Passive event listeners 的提出就解决了这样的问题。

原文链接:https://www.jianshu.com/p/04bf173826aa

 

原文地址:https://www.cnblogs.com/vinieo/p/9862580.html

时间: 2024-10-07 22:00:29

vue运行报错--preventDefault的相关文章

《关于vue运行报错的那些事儿》

vue运行常见报错: 一,序言: 在vue项目运行的时候,有时会报错,就会很头疼,我把常见的报错归为两类:一类是缺少依赖,一类则是找不到相关文件!我会在下方列出来我常见的关于缺少依赖型的报错,希望可以帮到大家~ 二,报错问题: 1,缺少依赖型之简单提示型,如: not find node_modules 'chalk' 解决方法:npm install chalk not find node_modules 'semver' 解决方法:npm install semver 总结一下:类似于像no

vue运行报错--eslint

Errors:? 1? http://eslint.org/docs/rules/no-trailing-spacesYou may use special comments to disable some warnings.Use // eslint-disable-next-line to ignore the next line.Use /* eslint-disable */ to ignore all warnings in a file.解决方法: 因为设置了eslint,如果不想有

Vue的报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Vue的报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 1.运行一下以前的一个Vue+webpack的 vue仿新闻网站  小项目,报错 由于自己vue学习不深入,老是这个报错,找了好久(确切的说是整整一下午^...^)才找到原因 -v- Uncaught TypeError: Cannot assign to read only property 'expor

appium运行报错java.net.SocketException: socket write error

这个错我调了 快两天一点头绪没有,脚本正常跑没问题,但是就是控制台输出信息报错,没法定位问题在哪.报错如图: 虽然这个报错不影响测试结果,但是本人有强迫症,一定要查出究竟: 我的尝试: 1.那天试验,服务器上的代码没问题,我本地一运行就报这个错,结果我把系统重装了(先前我查了两个小时百度加上尝试,无果) 2.今天从中午开始又开始搞起来,起初怀疑是我的io操作引起的,结果在finanly加了process.destroy();及p.getErrorStream(),close也不行, 网上查了说是

dubbo-admin-2.5.3 运行报错: Bean property &#39;URIType&#39; is not writable or has an invalid

因为 jdk 是1.8的版本,和 dubbo-admin 存在兼容性问题.所以报错: Bean property 'URIType' is not writable or has an invalid 参见:https://github.com/alibaba/dubbo/issues/50 解决方法,修改 tomcat 默认的 jdk到 1.7 : 1) 修改bin文件夹下面的catalina.bat文件,把如下内容rem ----- Execute The Requested Command

解决新建Support7Demos的sample时出现编译错误和运行报错出现的问题

右键New->Other->Android Sample Project->选择Android 4.4.2->选择Support7Demos ,finish. 会出现编译错误 解决如下: 1.把这三个文件导入到Eclipse里, 这三个是库文件,并且勾选COPY到工作空间里选项 如果没有这三个文件,就从这里下载 2.导入三个library工程后,mediarouter会无法编译,打开工程属性在anroid里将api-level改成17,添加依赖工程appcompat 3.就是将刚才

Vue.js报错Failed to resolve filter问题原因

Vue.js报错Failed to resolve filter问题原因 金刚 vue Vue.js js javascript 之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错误. console控制台调试的时候 提示错误消息: Failed to resolve filter: HomePage console错误信息.jpg 我原来的写法: 原来的错误写法.jpg 错误原因 经过自己的摸索,后来发现竟然是代码顺序错误问题... 由于先执行的pageList,后执行的V

windows 2003 64位系统php运行报错:1%不是有效的win32应用程序解决办法

windows 2003 64位系统php运行报错:1%不是有效的win32应用程序 解决办法:运行-CMD cscript c:\inetpub\adminscripts\adsutil.vbs SET W3SVC/AppPools/Enable32bitAppOnWin64 1

Oracle EBS-SQL (MRP-7):检查MRP计划运行报错原因之超大数据查询2.sql

The following scripts can be used to check for huge line numbers: -- PO Requisitions select * from PO_REQUISITION_LINES_ALL where LINE_NUM > 1000000000; -- PO Lines select * from PO_LINES_ALL where LINE_NUM > 1000000000; -- Receiving Supply SELECT *