您现在的位置: 365建站网 > 365学习 > 滑动时候错误提示:Unable to preventDefault inside passive event listener

滑动时候错误提示:Unable to preventDefault inside passive event listener

文章来源:365jz.com     点击数:101    更新时间:2018-11-11 19:01   参与评论

移动端Web界面滚动性能优化 Passive event listeners

mui页面,js点击事件嵌套ajax,提示:Unable to preventDefault inside passive

问题描述:


用MUI例子中的选项卡,底部的导航只能实现div切换,链接无法跳转。


查看控制台,输出:Unable to preventDefault inside passive event listener due to target 的警告。


技术分享


问题解决:


经检查相关资料,加入以下代码,即可解决问题。


mui(‘body‘).on(‘tap‘,‘a‘,function(){document.location.href=this.href;});


问题原因:


MUI在选项卡中的文字中已说明:


通过DIV模拟一个独立页面,通过DIV的显示、隐藏模拟不同页面的切换,典型的SPA模式;


所以默认的选项卡只适用于页面内多个div切换显示,如要做页面跳转,则需要加JavaScript代码修改浏览器地址。


手机版加入代码:


mui(‘body‘).on(‘tap‘,‘a‘,function(){document.location.href=this.href;});


电脑版加入代码:


mui(‘body‘).on(‘click‘,‘a‘,function(){document.location.href=this.href;});


引申:


为什么手机中要用trap,而不和电脑一样的click事件。


首先两者都会在点击时触发,但是在手机web端,click会有 200~300 ms,所以请用tap代替click作为点击事件。但在本次问题中,在手机web端使用click,也能实现跳转,并无影响


MUI底部选项卡链接跳转不了


最近更新了ios11.3,项目上发现这么一个问题,“我的”页面和两个列表页的滚动出现了问题,滚动时候不仅滚动了希望滚动的部分,整体的页面也跟随者上下滚动,整个页面非常卡顿。

  1. 这两个页面都用了touch事件

  2. 控制台打印如下警告:

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

解决办法1:

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

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

解决办法2:

 * { 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 的提出就解决了这样的问题。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (101人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------