D3 Differentiate between click and drag for an element which has a drag behavior

Question

I am unable to successfully distinguish between the click event and the drag event on an element that is bound to both using D3.js v3. The circle

Answer 1

You can differentiate between a click and a dragstart, but it is harder to differentiate between a mousdown and a dragstart.

dragstart will be triggered when you begin your drag action, meaning when you do your mousedown. This is why. whenever you click, dragstart will be triggered. (a click is a mousedown + mouseup).

So preventing the click to be triggered should work. In your code, you should add the preventDefault as Lars Kotthoff has hinted. But don't put it in the dragstart function:

var dragCircle = d3.behavior.drag()
    .on('dragstart', function () {
    d3.event.sourceEvent.stopPropagation();
    d3.event.sourceEvent.preventDefault(); <-- Remove This
    console.log('Start Dragging Circle');
})

And add it on the right place (in the click function), and write it correctly with d3 (d3.event.defaultPrevented)

g.selectAll('circle').data([{
    cx: 90,
    cy: 80
}]).enter()
    .append('circle')
    .attr('cx', function (d) {
    return d.cx
})
    .attr('cy', function (d) {
    return d.cy
})
    .attr('r', 30)
    .call(dragCircle)
    .on('click', click);

function click(d) {
  if (d3.event.defaultPrevented) return; <-- Add d3.event.defaultPrevented
  console.log('clicked');
}

See the updated version. Now, when dragging, the click is not triggered anymore.

Keep in mind that when clicking, the dragstart is still triggered. (but not drag)

Answer 2

The key bit that's missing is the check whether the default behaviour of an event has been prevented. That is, there's a matching sibling to d3.event.preventDefault() -- d3.event.defaultPrevented. You need to check this in your click handler to see whether any dragging action is going on.

See also the answer to this question.

Answer 3

d3.event.sourceEvent.preventDefault() doesn't work as expected or rather its inconsistent.

I faced this issue and to differentiate between the two events, I used a boolean value isDragged inside the onDrag event. So if this value is set, the drag event is performed on the object if not then click event is performed. Also a normal click on object triggers its dragstart and dragend event but not onDrag event.