Javascript 如何禁止画布元素在滚动页面时劫持鼠标滚轮？

在HTML5（我想？）中，当鼠标悬停在画布元素上时，页面上的画布元素将中断滚动

我使用Chart.js生成了一个页面，页面上有许多图形，所有图形都在一个元素中呈现

由于页面很长（垂直），用户通常会上下滚动页面以查看各种图形。每次他们滚动到屏幕上时，都必须将鼠标移出才能继续滚动，这很不方便

有没有办法覆盖canvas元素对鼠标滚轮事件的控制？我没有鼠标滚轮的功能。在此期间，我建议用户使用键盘快捷键

---

和往常一样，感谢这个非常有帮助的社区。如果我找到了解决方法或解决方案，我会将其发布在这里。

这是一个示例画布：

画布
{
背景色：红色；
}

---

要专门捕获事件，可以直接更改元素的

onmouseheel

方法

this.canvas.onmousewheel = function(evt){
    //perform your own Event dispatching here
    return false;
};

```

如果您只是在使用，我认为Chart.js不会劫持控制盘事件。但是如果您一起使用，轮子事件将被劫持

（chartjs插件zoom是Chart.js的缩放和平移插件）

chartjs插件zoom在滚动时劫持鼠标滚轮。如果希望用户使用鼠标滚轮上下滚动页面，而不是放大或缩小图表，则可以从图表中取消注册滚轮事件，如下所示：

var myChart = new Chart(ctx, {...});
myChart.ctx.canvas.removeEventListener('wheel', myChart._wheelHandler);

您可以在需要时重新添加事件处理程序：

myChart.ctx.canvas.addEventListener('wheel', myChart._wheelHandler);

---

签出。

设置中的配置选项。这将禁用缩放插件

options: {
  plugins: {
    zoom: false
  }
}