D3 События мыши - Click & DragEnd

В 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". На мой взгляд, должно быть отдельное событие для нажатия, потому что я вижу огромную разницу между dragend и click.

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

Ответ 1

В документации есть некоторые явные примеры для этого:

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

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

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

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

Ответ 2

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

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