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

Question

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

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

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

这可以成功删除缩放功能，但也可以防止使用鼠标滚轮进行滚动。有没有一种方法可以阻止鼠标滚轮缩放，同时保持鼠标滚轮滚动在我的可视化中？

score 1 · Accepted Answer

在您 .call() 缩放功能的任何元素上，您需要将其鼠标滚轮行为设置为 null。因此，如果您 .call(zoom) 从 a 或 id 为“yourElement”，那么它看起来像这样：

d3.select("#yourElement")
.call(myZoom)
.on("dblclick.zoom", null)
.on("mousewheel.zoom", null)
.on("DOMMouseScroll.zoom",null);

请注意，我还禁用了双击缩放，因为您可能也希望禁用它。

1 回答 1