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)

  • 相关阅读:
    java编程题古典算法之兔子问题
    java基础之final关键字
    java基础之final关键字
    java基础之静态代码块,局部代码块,构造代码块区别。
    java基础之静态代码块,局部代码块,构造代码块区别。
    java基础之完数判断
    java基础之完数判断
    java基础之二维数组不定义列数
    正则表达式快速入门
    深入理解JSON对象
  • 原文地址:https://www.cnblogs.com/linewman/p/9918538.html
Copyright © 2011-2022 走看看