zoukankan      html  css  js  c++  java
  • mui执行滑动事件: Unable to preventDefault inside passive event listener

    使用MUI框架,在上拉加载和下拉刷新的时候会出现下面的异常:

    [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; } 
     使用全局样式样式去掉

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

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

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

  • 相关阅读:
    Go并发
    frida打印class的信息--java反射
    Go嵌入类型
    Go方法集-应该传值类型还是指针类型?
    springboot使用unidbg遇到logback和sl4j依赖冲突,正确配置文件
    Eureka 微服务注册发现开源框架
    呼吸机CPAP与APAP:哪个更好?
    如何看睡眠监测报告
    抓包工具 tcpdump 用法说明
    利用ROS的samba功能实现centos定期备份ROS配置
  • 原文地址:https://www.cnblogs.com/yugb/p/10217089.html
Copyright © 2011-2022 走看看