Question

正如标题所说，我有一个对象，我需要它所有的拖动和点击事件。关于此问题有some discussion，但主要涉及点击和拖动事件。（并且答复小提琴无法正常工作）

我在这里有一个fiddle。当我拖动时，单击被阻止，但是当我单击dragstart和end events时。我喜欢他们点击时不要开火，我想在我想拖动的时候点击不要开火。

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

您的示例按预期工作。请参阅更新的小提琴：https://jsfiddle.net/thatOneGuy/dd4nujxo/1/

我添加了一些控制台日志。当你拖动这一行时：

if (d3.event.defaultPrevented) {console.log('return'); return};

将停止点击事件的触发。当您只点击时，dragstart和dragend会被触发（按预期方式），但drag却没有。这就是为什么你把代码放在drag函数内移动圆圈的原因。整个过程按预期工作：）

Answer 2

@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');
  })

d3.js：区分拖动/开始/结束和单击事件

2 个答案: