D3 Mouse Events -- Click & DragEnd
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.