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?
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.
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
).
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