Polymer 2.0添加被动事件监听器后浏览器事件异常问题

嘿，我来帮你捋清楚这个问题～

首先得明确：当你调用Polymer.setPassiveTouchGestures(true)后，所有通过Polymer Gestures注册的触摸事件监听器都会被设置为被动模式。被动监听器的核心限制是：你不能在监听器函数里调用e.preventDefault()、e.stopPropagation()这类阻止浏览器默认行为的方法——如果硬要调用，浏览器会直接忽略这个操作，甚至在控制台抛出警告，这就是你看到“浏览器停止处理事件”的关键原因。

接下来给你几个具体的排查和修改方向：

• 检查监听器函数里的阻止默认行为代码
  打开你的handleTrackView1方法，看看有没有类似这样的代码：

  handleTrackView1(e) {
    e.preventDefault(); // 被动模式下这个操作会失效
    // 或者 e.stopPropagation()、e.stopImmediatePropagation()
    // 其他业务逻辑
  }
  

  如果有，直接删掉这些阻止默认行为的语句。被动模式的设计初衷就是让浏览器提前执行默认操作（比如滚动）来提升性能，所以不允许监听器干预默认行为。

• 确认被动模式设置的时机是否正确
  虽然你已经在app.html的constructor里先调用了Polymer.setPassiveTouchGestures(true)再执行super()，这个时机是对的，但要确保没有其他地方在更早的阶段添加了手势监听器。比如如果某个子元素在connectedCallback之前就注册了手势事件，那它的监听器可能没被设置成被动模式，导致和全局设置冲突。

• 如果必须阻止默认行为，放弃全局被动设置
  如果你确实需要在手势事件里阻止浏览器的默认行为，那全局设置被动模式就不适合你了。这时候可以去掉Polymer.setPassiveTouchGestures(true)的调用，或者针对特定的监听器使用原生addEventListener并手动指定非被动选项：

  this.$.view1.addEventListener('track', e => this.handleTrackView1(e), { passive: false });
  

  不过这样会失去Polymer手势封装的一些优势，需要根据你的业务需求权衡。

另外，建议打开浏览器的开发者工具控制台，看看有没有类似Unable to preventDefault inside passive event listener invocation.的警告，这能直接帮你定位问题所在。

内容的提问来源于stack exchange，提问作者Sachin Naik