d3.js: Различие между перетаскиванием/запуском/окончанием и событием click

Question

Как говорится в названии, у меня есть объект, и мне нужно все это перетащить и щелкнуть события. Об этой проблеме был some discussion, но в основном это касалось событий щелчка и перетаскивания. (и скрипт ответа не работал должным образом)

У меня есть fiddle здесь, где я нахожусь. Когда я перетаскиваю, щелчок блокируется, но когда я нажимаю стрелку dragstart и заканчивает огонь. Я бы хотел, чтобы они не стреляли, когда я нажимаю, и я бы хотел, чтобы не стрелял, когда я хочу перетащить.

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