滚动页面时如何禁用画布元素劫持鼠标滚轮？答案

【问题标题】：How to disable canvas elements from hijacking mouse wheel when scrolling through a page?滚动页面时如何禁用画布元素劫持鼠标滚轮？
【发布时间】：2017-11-13 05:28:53
【问题描述】：

在 HTML5 中（我认为？），当鼠标悬停在页面上的 Canvas 元素上时，它们会中断滚动。

我使用 Chart.js 生成了一个页面，上面有很多图表，所有图表都在一个元素内呈现。

由于页面很长（垂直），用户经常会向上/向下滚动页面以查看各种图表。每次他们滚动到 a 时，他们必须将鼠标移开才能继续滚动，这很不方便。

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

一如既往地感谢这个非常有帮助的社区。如果我找到解决方法或解决方案，我会在此处发布。

【问题讨论】：

标签： javascript html html5-canvas chart.js

【解决方案1】：

如果你只是使用Chart.js，我认为Chart.js 不会劫持wheel 事件。但是如果同时使用chartjs-plugin-zoom，就会劫持wheel事件。

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

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

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

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

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

查看this example on jsfiddle。

【讨论】：

【解决方案2】：

这是一个示例画布：

canvas
{
  background-color: red;
}

&lt;canvas&gt;&lt;/canvas&gt;

运行 sn-p 并测试它。你会看到根本没有滚动抑制。

您所体验的是 Chart.js 有意添加的内容。

要删除它，使用 jQuery，如下所示：

$(function () {
  $("*").off("scroll");
});

这将从页面上的所有元素中删除所有滚动处理程序，或者采用一种不太激进的方式：

  $("canvas").off("scroll");

最后一种方式不那么激进，并且只保留非画布，但这可能还不够。滚动处理程序可以附加到画布的祖先，例如不可见的 div。

【讨论】：

【解决方案3】：

要专门捕获事件，您可以直接更改元素的onmousewheel 方法。

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

```

【讨论】：

【解决方案4】：

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

options: {
  plugins: {
    zoom: false
  }
}

【讨论】：