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

    问题

    这几天写手机网页的时候发现浏览器一直报这个错误,但是不影响使用,可能是我有强迫症的原因吧,就算不影响正常使用,我也看不惯,就要把它消灭掉。
    在使用 swiper.js jquerymobile.js 等移动端js库的时候,如果使用了滑动事件,不时就会报错:

    翻译一下:chrome 监听touch类事件报错:无法被动侦听事件preventDefault,是新版本chrome浏览器报错。

    preventDefault()是取消默认事件的,如果这个函数起作用,可以使 默认的表单提交不提交,a链接的点击跳转不跳转。

    原因:google浏览器为了最快速的相应touch事件,做出的改变。
    历史:当浏览器首先对默认的事件进行响应的时候,要检查一下是否进行了默认事件的取消。这样就在响应滑动操作之前有那么一丝丝的耽误时间。
    现在:google就决定默认取消了对这个事件的检查,默认事件就取消了。直接执行滑动操作。这样就更加的顺滑了。
    但是浏览器的控制台就会进行错误提醒了。

    具体情况:
    从 chrome56 开始,在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认为 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。

    导致下面的效果一致:

    window.addEventListener('touchmove', func) //效果和下面一句一样
    window.addEventListener('touchmove', func, { passive: true })
    

    这样会出现新的问题:
    如果在window、document 和 body 元素的 touchstart 和 touchmove 事件处理函数中调用 e.preventDefault() ,会被浏览器忽略掉,并不会阻止默认行为。

    解决

    怎么可以既不让控制台提示,而且 preventDefault() 有效果呢?

    • 方法一:
      应用 CSS 属性 * { touch-action: none; } 这样任何触摸事件都不会产生默认行为,但是 touch 事件照样触发。
      touch-action详情: touch-action
    • 方法二:
      注册处理函数时,用如下方式,明确声明为不是被动的{ passive: false }
      window.addEventListener(‘touchmove’, func, { passive: false })
  • 相关阅读:
    关于阿里云带宽监控指标记录
    mongodb备份还原
    squid3.5缓存代理实践记录
    kafka依赖zookeeper原因解析及应用场景
    Zookeeper+Kafka集群部署(转)
    dubbo框架提供Main方法运行容器的几种方式(转)
    html标签简介(常用)
    数据库中和表并列的其他对象
    外键约束
    数据库中的约束
  • 原文地址:https://www.cnblogs.com/ZerlinM/p/14142151.html
Copyright © 2011-2022 走看看