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", function () {alert("dragEnd")}); 

You really cannot do the following:

d3.select("#text1") .on("click", function(d,i) {alert("clicked")}) .call(drag); 

Reason is that the click will get fired after that the "dragend" will fire . In my opinion there should be a separate event for clicking because I see a huge difference between dragend and click.

To differentiate between clicking and end of a dragging event in an SVG element, what would be the solution?

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.