D3 Mouse Events — Click & DragEnd

Question

In D3, if you defined a drag function like this:

var drag = d3.behavior.drag()
        .on(\"drag\", function () {alert(\"drag\")})
        .on(\"dragend\",          


        

Answer 1

The documentation has some explicit examples for this:

When registering your own click listener on draggable elements, you can check whether the click event was suppressed as follows:

selection.on("click", function() {
  if (d3.event.defaultPrevented) return; // click suppressed
  console.log("clicked!");
});

This, along with the stopPropagation() example immediately afterwards, allows you to control which events are fired and handled.

To be clear, differentiating between a drag end and click event is entirely down to you. The easiest way to do this is probably to set a flag when dragging takes place and use that flag to determine whether a dragend or click event should be handled.

Answer 2

Since 4.9.0 there is .clickDistance() with which you can control after which distance moved (from where you started dragging) you won't get a click event.

Note that you might get any click event at all if you remove the element from the DOM before release of the button (e.g. by using .raise() in the drag handler).