[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

 

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

  1. vue运行报错--dependency

    ERROR Failed to compile with 1 errors 11:17:27 This dependency was not found: 解决方法:把报错所缺少的依赖都装上 如 xx ...

  2. vue运行报错error:Cannot assign to read only property 'exports' of object '#<Object>'

    用weex做项目的时候,npm start 之后一直报错error:Cannot assign to read only property 'exports' of object '#<Obje ...

  3. vue运行报错webpack-dev-server: command not found

    翻译过来就是: 'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序 解决方法: 然后总结下成功的步骤: 1. 直接在项目目录下: cnpm install npm run ...

  4. Vue运行报错--not defined

    按F12键进入调试模式,谷歌总是提示Uncaught ReferenceError: ——is not defined这个错误. 原来是因为虽然是传递的值,但是在函数传参的时候也要加引号,加上引号后就 ...

  5. Vue运行报错--eslint

    Errors:? 1? http://eslint.org/docs/rules/no-trailing-spacesYou may use special comments to disable s ...

  6. 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>' ...

  7. vue IE 报错 引用babel-polyfill

    一.vue 项目报错 vuex requires a Promise polyfill in this browser     在网上找到下面三篇文章,然而和我的项目都不太一样. 我的项目基于 基础模 ...

  8. 【转】Vue项目报错:Uncaught SyntaxError: Unexpected token <

    这篇文章主要介绍了Vue项目报错:Uncaught SyntaxError: Unexpected token <,在引入第三方依赖的 JS 文件时,遇到的一个问题,小编觉得挺不错的,现在分享给 ...

  9. Vue. 之 报错 Uncaught (in promise)

    Vue. 之 报错 Uncaught (in promise) 在点击同一个URL的时候,会报错如下: 解决方案: 在项目目录下运行 npm i vue-router@3.0 -S 即可.

随机推荐

  1. c#md5加密的简单用法

    using System.Security.Cryptography; //MD5 md5 = MD5.Create(); MD5 md5 = new MD5CryptoServiceProvider ...

  2. Oracle之数据库的增删改查和格式的修改

    Oracle修改数据 *update语句 格式: update table_name set column1=value1,…[where conditions] 例子: update userinf ...

  3. 解决mySQL占用内存超大问题

    为了装mysql环境测试,装上后发现启动后mysql占用了很大的虚拟内存,达8百多兆.网上搜索了一下,得到高人指点my.ini.再也没见再详细的了..只好打开my.ini逐行的啃,虽然英文差了点,不过 ...

  4. php canvas 前端JS压缩,获取图片二进制流数据并上传

    <?php if(isset($_GET['upload']) && $_GET['upload'] == 'img'){ //二进制数据流 $data = file_get_c ...

  5. Solr导入MySQL数据之dataimport-handler

    Solr不借助手动JSolr编程情况下也可以将Mysql的数据导入到Solr中.实现方式是安装dataimport-Handler从关系数据库将数据导入到索引库. 1.向SolrCore中加入jar包 ...

  6. NATS—消息通信模型

    消息通信模型 NATS的消息通信是这样的:应用程序的数据被编码为一条消息,并通过发布者发送出去:订阅者接收到消息,进行解码,再处理.订阅者处理NATS消息可以是同步的或异步的. * 异步处理  异步处 ...

  7. intel webrtc 部署

    org link conference server Configure the MCU server 1. set the maximum numbers of open files, runnin ...

  8. ProgressDemo

    封装了下如下View滑动效果,类似网易的首页滑动效果. 详情见: https://github.com/VivienQin16/ProgressDemo

  9. Junit中的setUp()与setUpBefore(), tearDown()与tearDownAfterClass()解析

    @BeforeClass public static void setUpBeforeClass() throws Exception { } @AfterClass public static vo ...

  10. ODAC(V9.5.15) 学习笔记(四)TMemDataSet (3)

    3.其他 名称 类型 说明 GetBlob TBlob 按照字段名获取当前数据集中某个Blob类型的字段值,并以TBlob对象形式返回 Prepared Boolean 检查Query的SQL是否已准 ...