拖动D3节点时阻止单击操作

时间:2015-06-09 05:22:57

标签: javascript d3.js

我可以点击D3节点获取alert();信息。我也可以拖动D3节点,但拖动也会在释放鼠标时触发点击行为。

有没有办法在拖动节点后阻止点击行为?

这就是我所说的拖动:

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);

下面的一个答案建议添加类似此代码的内容(如下所示),但我认为上述代码也必须进行修改才能使它们协同工作。

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

1 个答案:

答案 0 :(得分:7)

正如docs提到的那样:

  

将拖动行为与其他事件侦听器组合用于交互事件时,您还可以考虑停止源事件上的传播以防止多个操作。

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

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