zoukankan      html  css  js  c++  java
  • [Intervention] Unable to preventDefault inside passive event listener due to target being treated as

    谷歌浏览器的警告:

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

    造成原因:

    由于浏览器必须要在执行事件处理函数之后,才能知道有没有掉用过 preventDefault() ,这就导致了浏览器不能及时响应滚动,略有延迟。

    所以为了让页面滚动的效果如丝般顺滑,从 chrome56 开始,在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认为是 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。

    导致的问题:

    浏览器在触发touchstart,touchmove事件的时候,e.preventDefault()会被浏览器忽略掉,并不会阻止默认行为。

    解决方案:

    1,注册处理函数时,用如下方式,明确声明为不是被动的

    window.addEventListener('touchmove', fn, { passive: false })

    2、应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为,但是 touch 事件照样触发。

    其他

    [我的博客,欢迎交流!](http://rattenking.gitee.io/stone/index.html)

    [我的CSDN博客,欢迎交流!](https://blog.csdn.net/m0_38082783)

    [微信小程序专栏](https://blog.csdn.net/column/details/18335.html)

    [前端笔记专栏](https://blog.csdn.net/column/details/18321.html)

    [微信小程序实现部分高德地图功能的DEMO下载](http://download.csdn.net/download/m0_38082783/10244082)

    [微信小程序实现MUI的部分效果的DEMO下载](http://download.csdn.net/download/m0_38082783/10196944)

    [微信小程序实现MUI的GIT项目地址](https://github.com/Rattenking/WXTUI-DEMO)

    [微信小程序实例列表](http://blog.csdn.net/m0_38082783/article/details/78853722)

    [前端笔记列表](http://blog.csdn.net/m0_38082783/article/details/79208205)

    [游戏列表](http://blog.csdn.net/m0_38082783/article/details/79035621)

  • 相关阅读:
    基于modelforms组件实现注册功能
    Django中间件添加白名单
    微信公众号推广工具
    Mysql数据库密码忘记的解决办法
    Redis 高可用及分片集群,说了你也不懂
    SQLAlchemyの增删改查
    metaclass 了解一下
    伊戈尔·赛索耶夫的旗帜
    一些容易搞混的问题
    林纳斯·托瓦兹的旗帜
  • 原文地址:https://www.cnblogs.com/linewman/p/9918538.html
Copyright © 2011-2022 走看看