D3 События мыши - Нажмите и DragEnd

Question

В D3, если вы определили функцию перетаскивания, как это:

var drag = d3.behavior.drag() 
     .on("drag", function() {alert("drag")}) 
     .on("dragend", function() {alert("dragEnd")}); 

Вы действительно не можете сделать следующее:

d3.select("#text1") 
.on("click", function(d,i) {alert("clicked")}) 
.call(drag); 

Причина в том, что щелчок после этого начнется стрельба. На мой взгляд, должно быть отдельное событие для нажатия, потому что я вижу огромную разницу между dragend и click.

Чтобы различать щелчок и конец события перетаскивания в элементе SVG, каково было бы решение?

Answer 1

The documentation имеет некоторые явные примеры этого:

При регистрации собственного щелчка слушателя на перемещаемых элементах, вы можете проверить, является ли событие щелчка подавлено следующим образом:

selection.on("click", function() { 
    if (d3.event.defaultPrevented) return; // click suppressed 
    console.log("clicked!"); 
}); 

Этого , а также пример stopPropagation(), позволяет вам контролировать, какие события запускаются и обрабатываются.

Чтобы быть четким, дифференциация между концом перетаскивания и событием клика полностью зависит от вас. Самый простой способ сделать это - это, вероятно, установить флаг при перетаскивании и использовать этот флаг, чтобы определить, следует ли обрабатывать событие dragend или click.

Answer 2

С 4.9.0 есть .clickDistance(), с помощью которого вы можете управлять, после чего расстояние переместилось с того места, где началось перетаскивание, вы не получите событие click.

Обратите внимание, что вы можете получить любую click события на всех, если вы удалите элемент из DOM до выхода кнопки (например, с помощью .raise() в drag обработчика).