Chrome下jQuery 1.7.1 passive事件监听器preventDefault报错求助

核心原因 #

Chrome为了优化滚动性能，会把touchstart、touchmove、wheel这类和滚动相关的事件监听器默认设为passive: true模式，这种模式下调用e.preventDefault()就会触发你看到的错误。解决关键是在绑定这些事件时，显式声明{passive: false}，告诉浏览器你需要阻止默认行为。

具体添加位置 #

1. 原生JS绑定事件的场景 #

如果你的代码是用addEventListener绑定事件，比如原来的写法：

element.addEventListener('touchmove', function(e) {
  e.preventDefault();
  // 你的其他逻辑
});

直接把{passive: false}加到第三个参数位置：

element.addEventListener('touchmove', function(e) {
  e.preventDefault();
  // 你的其他逻辑
}, { passive: false });

2. jQuery绑定事件的场景 #

如果用jQuery的on()方法绑定事件，分两种情况：

• jQuery 3.0及以上版本：直接在事件名和回调函数之间加选项参数：

$('.target-element').on('touchmove', { passive: false }, function(e) {
  e.preventDefault();
  // 你的其他逻辑
});

• 老版本jQuery（低于3.0）：老版本不支持passive选项，这时候可以修改你提供的jQuery事件原型代码，给preventDefault方法加错误捕获，避免控制台报错：
  修改后的preventDefault部分代码：

preventDefault: function() {
    this.isDefaultPrevented = returnTrue;

    var e = this.originalEvent;
    if ( !e ) {
        return;
    }

    // 新增错误捕获，忽略passive模式下的报错
    try {
        if ( e.preventDefault ) {
            e.preventDefault();
        } else {
            e.returnValue = false;          
        }
    } catch(err) {
        // 什么都不用做，只是避免报错
    }
},

注意事项 #

• 只给**确实需要调用preventDefault()**的滚动相关事件加{passive: false}，别给所有事件都加，不然会影响滚动性能。
• 优先改事件绑定的代码，修改jQuery原型是实在没办法的兜底方案。

内容的提问来源于stack exchange，提问作者Domains G