无法使用 Quasar Framework 阻止被动事件侦听器调用中的默认情况

Question

我在 Vue3 应用程序上使用 Quasar 框架。

我已经“成功”集成了

<q-slider />

组件。但是，平移组件上的旋钮后，控制台上会记录以下消息。

Unable to preventDefault inside passive event listener invocation

解决该问题的努力让我转向了具有常见 css 解决方案的浏览器

style="touch-action: pan-x;"

但这对我不起作用。

我已经对此进行了测试；

• Chrome：存在问题，
• Edge：存在问题，
• Firefox：存在问题
• Safari：问题不存在。

我的 Quasar 版本是：

• “@quasar/extras”：“^1.16.9”，
• “类星体”：“^2.15.1”，
• “@quasar/app-vite”：“^1.8.0”，

Answer 1

根据脚本，有一些解决方案，您可以尝试其中之一，希望它适合您的情况

1. 添加

   {passive:false}

   ：
   • 查找导致触发违规的事件侦听器。并添加

     {passive:false}

     作为第三个参数 (source)

   window.addEventListener('touchstart', function() {
        // some logic
   }, {passive:false}); 

2. 添加

   touch-action: none;

   CSS：
   • 如果你在 touchstart 上调用 PreventDefault 那么你还应该有一个 CSS 规则来禁用触摸滚动，例如

谢谢你