如何防止Mousewheel事件的默认操作

Question

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

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

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

这可以成功地删除缩放功能，但它也可以防止滚动鼠标滚轮。有没有办法可以在我的可视化中保持鼠标滚轮滚动的同时停止鼠标滚轮变焦？

Answer 1

对于.call（）缩放功能的任何元素，您需要将其鼠标滚轮行为设置为null。所以如果你.call（缩放）来自一个或者你的id为“yourElement”那么它会是这样的：

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

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