title: D3 Differentiate between click and drag for an element which has a drag behavior
body: <p>I am unable to successfully distinguish between the <code>click</code> event and the <code>drag</code> event on an element that is bound to both using D3.js v3.  The circle in the code below is assigned a drag behaviour and also a <code>click</code> listener.
  <a href="http://jsfiddle.net/robschmuecker/2EqA3/" rel="noreferrer">Demo here</a></p>
  
  <pre><code>var dragGroup = d3.behavior.drag()
      .on('dragstart', function () {
      console.log('Start Dragging Group');
  })
      .on('drag', function (d, i) {
      d.x += d3.event.dx;
      d.y += d3.event.dy;
      d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
  });
  
  var dragCircle = d3.behavior.drag()
      .on('dragstart', function () {
      d3.event.sourceEvent.stopPropagation();
      d3.event.sourceEvent.preventDefault();
      console.log('Start Dragging Circle');
  })
      .on('drag', function (d, i) {
      d.cx += d3.event.dx;
      d.cy += d3.event.dy;
      d3.select(this).attr('cx', d.cx).attr('cy', d.cy);
  });
  
  var svg = d3.select('body').append('svg').attr('viewBox', '-50 -50 300 300');
  var g = svg.selectAll('g').data([{
      x: 10,
      y: 10
  }])
      .enter().append('g').call(dragGroup);
  
  g.append('rect').attr('width', 100).attr('height', 100);
  
  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', function () {
      console.log('clicked circle');
  });
  </code></pre>
  
  <p>Whenever I click the circle in the example I get the console logging the <code>drag</code> event aswell as the <code>click</code> event.  I also get the same behavior when dragging, first the <code>drag</code> event is logged and on <code>mouseup</code> the <code>click</code> event gets logged.</p>
  
  <p>What is the correct way to handle these events separately?<br>
  The use case is an attempt to handle a node-click and a node-drag/drop in a tree layout.</p>