如何停止 d3.drag 在 chrome 中触发 mouseover/mouseout 事件

Question

我有以下 d3 可视化。顶部较深的颜色表示已选择一个节点。当我将鼠标悬停在未选择的节点上时，它会更改不透明度，因此用户可以看到如果我单击将选择哪个节点。

这是通过 CSS 样式表和以下 js/d3 实现的：

nodeSelection.select("circle").on('mouseover', function(e) {
             d3.select(this).classed("hover", true);
            _this.fireDataEvent("mouseOverNode", this);
        });

        nodeSelection.select("circle").on('mouseout', function(e) {
            d3.select(this).classed("hover", false);
            _this.fireDataEvent("mouseOutNode", this);
        });

到目前为止，一切都很好。但是，当我拖动时，拖动功能似乎会在我没有拖动的节点上随机触发鼠标悬停和鼠标移出事件。这会导致节点不透明度闪烁。如果我查看 chrome 中的开发工具，我可以看到这是因为它导致节点获得类“悬停”。上面添加这个 CSS 类的代码没有出现在其他地方，并且通过使用控制台日志记录，我已经确认 mouseover 和 mouseout 事件正在被触发。这些节点通常离光标很远。

在 Firefox 中不会出现此问题。

Answer 1

更新：我实际上在发布后几乎立即解决了这个问题。我只是在拖动开始时明确取消注册监听器，然后在拖动结束时重新注册。如果他们有类似的问题，对某些人来说可能仍然很有趣。

我的拖动功能现在看起来像：

var drag = d3.behavior.drag()
            .on("dragstart", function(d) {
                console.log("dragstart");
                d.dragstart = d3.mouse(this); // store this
                d.fixedbeforedrag = d.fixed;
                d.fixed=true;

                // deregister listeners
                nodeSelection.select("circle").on("mouseover", null).on("mouseout", null); 
            })
            .on("drag", function(d) {
                d.px = d.x; // previous x
                d.py = d.y;
                var m = d3.mouse(this);
                d.x += m[0] - d.dragstart[0];
                d.y += m[1] - d.dragstart[1];
                nodeSelection.attr("transform", "translate(" + [d.x, d.y] + ")");
                _this.getForce().start();
            })
            .on("dragend", function(d) {
                console.log("dragend");
                delete d.dragstart;
                d.fixed = d.fixedbeforedrag;
                //reregisters listeners
                _this.updateSVG(); 
            });