阻止默认事件失败的解决办法

2023-12-25 12:48:47

有时候会在控制台看到

Unable to preventDefault inside passive event listener invocation

在passive:true,并且事件本身阻止了默认事件时,就会有上述错误?

window.addEventListener("touchmove", handler, { passive: true });

function handler(e) {
 
        //阻止默认事件,如点击<a>标签阻止其默认跳转事件
        e.preventDefault();
 
        //其他逻辑...
    }

本质:
谷歌浏览器对event.preventDefault()(默认事件阻止)的检测机制变化导致的(听不懂?直接看下面)。

老版本:当用户触发我们定义的监听事件时候(如条件1中的“touchmove”事件),浏览器会主动检测对应的handler代码中是否有event.preventDefault(),以便进行默认事件阻止。但是这样做会增加响应时间,用户体验受到影响;

window.addEventListener("touchmove", handler);
window.addEventListener("touchmove", handler, { passive: true });

新版本的chrome默认就是passive:true
就是让chrome消极的去阻止默认事件,等价于不检测是否阻止默认事件,以达到提升浏览器性能的目的.但在这种情况下如果写了e.preventDefault(),相当于"违约,chrome就会在控制台报错?

上面两个代码效果相同,我们经常用第一条,不知不觉中定义了一个被动监听事件。

那么问题就来了,我们不知道我们的事件已经默认被定义为了被动事件监听。结果我们在这个事件监听中调用了event.preventDefault(),浏览器就不高兴了,报错,告诉你:

“你定义的事件不是一个被动事件监听吗?不就是告诉我为了提高响应速度不要处理event.preventDefault()吗?为啥你还要调用event.preventDefault()!”

看了我们已经找到问题所在了。

总结:被动事件监听不能调用event.preventDefault()。

解决办法:
1、声明事件监听的时候设置为主动事件监听:

window.addEventListener(‘touchmove’, handler, { passive: false});

2、设置监听事件绑定的dom的CSS为:

touch-action:none

表示当触控事件发生在绑定的dom上时,不进行任何操作。

文章来源:https://blog.csdn.net/aexwx/article/details/135195504
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。