在拖动D3节点时阻止点击操作 [英] Prevent click action when dragging a D3 Node

问题描述

我可以点击D3节点来获得 alert（）;信息。我可以拖动D3节点，但拖动也会触发鼠标释放时的点击行为。

I'm able to click on a D3 node to get an alert(); message. I'm able to drag the D3 node too, but dragging also triggers the click behavior when the mouse is released.

有一种方法可以防止拖动后的点击行为节点？

Is there a way to prevent the click behavior after dragging the node?

这是我调用drag的地方：

This is where I call drag:

var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter()
  .append("g")
    .attr("transform", function(d){return "translate("+d.x+","+d.y+")"})
    .on("click", function(d){
        if(d.user_id != "" && d.user_id != null){
            parent.parent.openUserProfile(d.user_id);
        }
    })
    .call(force.drag);

下面的一个答案建议添加类似这样的代码（下面），但我认为上面的代码必须进行修改才能使它们一起工作。

One answer below suggests adding something like this code (below), but I think that the code above also has to be modified to make them work together.

var drag = d3.behavior.drag();
drag.on("dragend", function() {
  d3.event.sourceEvent.stopPropagation(); // silence other listeners
});

推荐答案

由于docs 已提及：

将拖曳行为与对于交互事件的其他事件侦听器，您还可以考虑停止在源事件上的传播以防止多个操作。

When combining drag behaviors with other event listeners for interaction events, you may also consider stopping propagation on the source event to prevent multiple actions.

var drag = d3.behavior.drag();
selection.call(drag);

drag.on("dragend", function() {
  d3.event.sourceEvent.stopPropagation(); // silence other listeners
});

这篇关于在拖动D3节点时阻止点击操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！