ApexCharts在Angular中使用鼠标滚轮缩放时出现“Unable to preventDefault inside passive event listener invocation”警告的解决咨询

你遇到的这个问题其实是浏览器被动事件监听器机制和ApexCharts内部事件处理的冲突导致的——ApexCharts在处理滚轮缩放时试图调用preventDefault()来阻止页面滚动，但浏览器默认把滚轮事件设为被动监听器，不允许在这类监听器里调用这个方法，所以抛出了警告。结合你已经尝试的方法，这里给你几个更针对性的解决思路：

1. 自定义ApexCharts的事件监听器选项 #

你可以在初始化图表时，通过chart.events覆盖默认的滚轮事件监听器配置，显式设置非被动模式。在Angular组件的图表初始化代码里可以这么写：

this.chartOptions = {
  chart: {
    zoom: {
      enabled: true,
      type: 'xy'
    },
    events: {
      mounted: (chartContext) => {
        const chartCanvas = chartContext.el.querySelector('.apexcharts-canvas');
        if (chartCanvas) {
          // 移除默认的滚轮事件监听器
          chartCanvas.removeEventListener('wheel', chartContext.wheelZoomHandler);
          // 重新添加监听器，设置passive为false
          chartCanvas.addEventListener('wheel', chartContext.wheelZoomHandler, { passive: false });
        }
      }
    }
  },
  // 其他图表配置项...
};

这个方法的核心是在图表挂载完成后，替换掉默认的滚轮监听器，让ApexCharts内部的preventDefault()能正常执行，不会触发警告。

2. 精准设置CSS样式 #

你之前尝试的touch-action: none方向是对的，但可以把样式作用范围更精准地指向图表交互区域：

.apexcharts-canvas {
  touch-action: none;
  pointer-events: auto;
}

这段CSS会告诉浏览器，图表区域不需要处理默认的触摸/滚轮行为，间接绕过被动监听器的限制。

3. 升级ApexCharts版本 #

部分旧版本的ApexCharts确实存在这个被动事件监听器的兼容问题，官方在后续更新里修复了这个警告。你可以尝试把项目中的apexcharts以及对应的Angular封装库ng-apexcharts升级到最新稳定版，说不定警告会自动消失。

额外验证方案 #

如果上面的方法都没解决，你还可以尝试用Angular的HostListener手动拦截图表区域的滚轮事件：

@HostListener('wheel', ['$event'])
onWheel(event: WheelEvent) {
  const target = event.target as HTMLElement;
  // 判断事件是否来自图表内部
  if (target.closest('.apexcharts-canvas')) {
    event.preventDefault();
    // 若需要可手动调用ApexCharts的缩放逻辑
  }
}

内容来源于stack exchange