在拖动D3节点时防止点击动作

Prevent click action when dragging a D3 Node

本文关键字：拖动 D3 节点      更新时间：2023-09-26

我可以点击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
});

正如文档中提到的:

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

var drag = d3.behavior.drag();
selection.call(drag);
drag.on("dragend", function() {
  d3.event.sourceEvent.stopPropagation(); // silence other listeners
});
相关文章：