Zdarzenia Myszy D3-Kliknij I Przeciągnij

W D3, jeśli zdefiniowałeś funkcję przeciągania w ten sposób:

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

Naprawdę nie możesz zrobić:

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

Powodem jest to, że kliknięcie zostanie zwolnione po tym, jak" dragend " odpali . Moim zdaniem powinno być osobne wydarzenie dla klikania, ponieważ widzę ogromną różnicę między dragend I click.

Aby odróżnić kliknięcie od zakończenia zdarzenia przeciągania w elemencie SVG, jakie byłoby rozwiązanie?

Author: FidEliO, 2013-09-29

2 answers

Dokumentacja ma na to kilka wyraźnych przykładów:

Podczas rejestracji własnego słuchacza kliknięć na przeciąganych elementach, możesz sprawdzić, czy zdarzenie kliknięcia zostało stłumione w następujący sposób:

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

To, wraz z poniższym przykładem stopPropagation(), pozwala kontrolować, które zdarzenia są wywoływane i obsługiwane.

Aby było jasne, rozróżnienie między zakończeniem przeciągania i kliknięciem zależy wyłącznie od Ciebie. Najprostszym sposobem na to jest prawdopodobnie, aby ustawić flagę podczas przeciągania i użyć tej flagi do określenia, czy zdarzenie dragend lub click powinno być obsługiwane.

 46
Author: Lars Kotthoff,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-29 11:23:16

Od 4.9.0 jest .clickDistance() za pomocą którego możesz kontrolować, po której odległości przesunięto od miejsca, w którym rozpoczęto przeciąganie, nie otrzymasz zdarzenia click.

Zauważ, że możesz otrzymać dowolne zdarzenie click, Jeśli usuniesz element z DOM przed zwolnieniem przycisku (np. za pomocą .raise() w module drag).

 0
Author: phk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-05 15:00:12