Prevent click action when dragging D3 Node

Question

I can click on D3 node to get alert() ; message. I can also drag the D3 node, but the drag also triggers the click behavior when the mouse is released.

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

Here 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 (see below), but I think the code above should also be modified to make them work together.

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

Answer 1

As the docs noted:

When combining drag and drop behavior with other event listeners for interaction events, you can also consider stopping propagation in the original event to prevent several actions.

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