如何防止鼠标滚轮事件的默认操作

How to Prevent Default action of Mousewheel event

本文关键字：默认 操作 事件 何防止 鼠标      更新时间：2023-09-26

我正在努力构建一个 d3.js 条形图，该条形图将允许我通过将具有固定宽度和高度的 svg 元素包装在具有溢出属性的较小div 内来在 x 轴上滚动。此可视化构建在一个处理数据的平台上，并提供一个 JavaScript 代码编辑器来创建可视化。发布代码后，条形图将在 htmldiv 元素中呈现。

呈现条形图的页面具有使用鼠标滚轮时触发的默认缩放事件。由于我想使用鼠标滚轮在条形图中滚动，因此我尝试通过在代码中包含以下语句来阻止触发默认缩放操作：

$(vizhtmlelement).mousewheel(function() {
    return false;
});

这可以成功删除缩放功能，但它也会阻止使用鼠标滚轮滚动工作。有没有办法在保持鼠标滚轮滚动的同时阻止鼠标滚轮缩放的发生？

在缩放函数 .call（） 的任何元素上，都需要将其鼠标滚轮行为设置为 null。因此，如果您从 或 的 或 ID 为 "yourElement" 进行 .call（zoom），那么它看起来像这样：

d3.select("#yourElement")
.call(myZoom)
.on("dblclick.zoom", null)
.on("mousewheel.zoom", null)
.on("DOMMouseScroll.zoom",null);
请注意，我还禁用了

双击缩放，因为您可能也希望禁用它。

相关文章：