zoukankan      html  css  js  c++  java
  • 阻止默认行为是配合passive使用

    在使用lighthouse检测pwa应用时,发现提示下面有下面的警告

    默认使用passive:true提高滚动性能并减少崩溃,passive即顺从的,是指它顺从浏览器的默认行为。设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿。一般我们写阻止默认行为的代码如下:

    ele.addEventListener('touchmove', function (e) { e.preventDefault();});

    //如果我们是为了阻止页面滚动添加了上述代码,默认行为就是滚动页面,但是如果我们阻止了这一默认行为,浏览器是无法预先知道的,必须等待事件监听器执行完成后,才知道要去阻止默认行为。等待监听器的执行是耗时的,,有些甚至耗时很明显,这样就会导致页面卡顿。即便监听器是个空函数,也会产生一定的卡顿,毕竟空函数的执行也会耗时。所以就有了passive属性,如果要阻止默认事件可以设置passive:false,
    //阻止事件的默认行为时,

    document.body.addEventListener('touchmove', function (e) {
        e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
    }, {passive: false}); //passive 参数不能省略,用来兼容ios和android

    //如果设置了passive为true,同时又阻止默认行为,阻止是不生效的

    document.addEventListener("touchmove", function(event) {
    event.preventDefault() //不产生作用
    }, {
    passive: true
    })

    详细请参考:https://www.cnblogs.com/ziyunfei/p/5545439.html

  • 相关阅读:
    [概述]移动机器人自主探索
    MRPT编译
    Kinect2.0相机标定
    小豆包的学习之旅:里程计运动模型
    小豆包的学习之旅:入门篇
    Kinect2.0点云数据获取
    COFF,amd64.vc90.mfc两个布署的问题
    [硬件]Robot运动控制
    [硬件]Urg_viewer数据读取
    [硬件]三维点云数据获取
  • 原文地址:https://www.cnblogs.com/lydialee/p/9067273.html
Copyright © 2011-2022 走看看