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?

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

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?

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

• javascript
• d3.js

• you tried e.preventDefault? (where e, is the event of of click) – Tim Commented Jun 9, 2015 at 5:45
• 1 what i did was involve another button press, so i can click and drag but to actually click (select) the node i have to press down shift + left mouse click to do this. Don't know if you want to look in to that, just an idea :) – thatOneGuy Commented Jun 9, 2015 at 8:26
• with your second question dont pass force.drag to the call function, pass the drag variable to it like so : .call(drag) – thatOneGuy Commented Jun 9, 2015 at 8:27

1 Answer 1

As the docs has mentioned:

When bining 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
});