javascript - d3.js : Differentiate between drag/start/end and click event

Question

正如标题所说，我有一个对象，我需要它的所有拖动和单击事件。有 some discussion关于这个问题，但它主要涉及点击和拖动事件。 (并且回复 fiddle 没有正常工作)

我有一个 fiddle我在这里的地方。当我拖动时，单击被阻止，但是当我单击 dragstart 和 end 事件时触发。我希望它们在我单击时不触发，我希望在我想拖动时单击不触发。

var drag = d3.behavior.drag()
  .origin(function(d){return d})
  .on('drag', function(d){
   d3.select(this).attr('cx', function(d){ return d.x += d3.event.dx });
   d3.select(this).attr('cy', function(d){ return d.y += d3.event.dy });   
   console.log('dragging');
})
.on('dragstart', function(d){
  d3.event.sourceEvent.stopPropagation()
  console.log('drag start');
})
.on('dragend', function(d){
  console.log('drag end');
})

// ..... 

 MySvgElementWith3DStuffOnIt.on('click', function(){
  if(d3.event.defaultPrevented) return;
  console.log('clicked');
});

Answer 1

@thatOneGuy 的小更新以使用 d3v4 拖动模块

https://jsfiddle.net/mhebrard/q5eL5qyv/

var drag = d3.drag()
    .on('drag', function(d){
    d3.select(this).attr('cx', function(d){ return d.x += d3.event.dx });
    d3.select(this).attr('cy', function(d){ return d.y += d3.event.dy });   
    console.log('dragging');
  })
  .on('start', function(d){
    console.log('drag start');
  })
  .on('end', function(d){
    console.log('drag end');
  })