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

Question

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

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

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

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

Answer 1

在.call()缩放函数的任何元素上，都需要将其鼠标滚轮行为设置为null。因此，如果您使用id为"yourElement“的a或进行缩放(.call)，那么它将如下所示：

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

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