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)

  • 相关阅读:
    redis 6379端口telnet不通的解决办法
    虚拟机centOS7 关闭防火墙后ping通 telnet不通 解决办法:disable seLinux
    oracle查询表名或字段查不到
    springcloud中feign使用的抗
    java分页使用本地线程方式
    PSS下载助手(PSX Download Helper)1.7.6.1发布
    Spring Cloud系列(四):Eureka源码解析之客户端
    Spring Cloud系列(三):Eureka源码解析之服务端
    Spring Cloud系列(二):Eureka应用详解
    Spring Cloud系列(一):微服务架构简介
  • 原文地址:https://www.cnblogs.com/linewman/p/9918538.html
Copyright © 2011-2022 走看看