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

【问题标题】：How to Prevent Default action of Mousewheel event如何防止鼠标滚轮事件的默认操作
【发布时间】：2013-10-25 20:30:39
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

嗨以利亚，感谢您的回复。不幸的是，无法控制缩放功能。它已经在整个页面上默认调用了。
据我所知，backbone.js 正在被使用，并且在一个 initialize() 属性中，一个函数 zoomHammer 被调用：this._zoomHammer = this.$content.zoomHammer(this.options).data("zoomHammer");。此 zoomHammer 函数具有以下行：el.data('zoomHammer', new Zoomable(this, options || {}));。 Zoomable 函数然后调用一个启用函数，其中包含：this.$root().on('mousewheel', function (ev, delta) { ev.preventDefault(); return instance._handleWheel(ev, delta); });
啊，我以为这是在处理 d3.zoom() 函数。我对骨干网不够熟悉，不知道如何覆盖它。