D3 Zdarzenia myszy - Click & DragEnd

Question

W D3, jeśli zdefiniowano funkcję przeciągania takiego:

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

Naprawdę nie można wykonać następujące czynności:

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

Powód jest taki, że klikniecie zostać zwolnionym po tym, jak zwolni się "dragend". Moim zdaniem powinno istnieć oddzielne zdarzenie do klikania, ponieważ widzę ogromną różnicę między dragend i click.

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

Answer 1

The documentation ma pewne wyraźne przykłady to:

Przy rejestracji własnego kliknij słuchacza na elementach Draggable, można sprawdzić, czy zdarzenie click został stłumiony w następujący sposób:

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

ten razem z przykładem stopPropagation() bezpośrednio po nim pozwala kontrolować, które zdarzenia są uruchamiane i obsługiwane.

Aby było jasne, rozróżnianie między zdarzeniem przeciągania i kliknięciem zależy wyłącznie od Ciebie. Najprostszym sposobem na to jest prawdopodobnie ustawienie flagi podczas przeciągania i użycie tej flagi do określenia, czy należy obsłużyć zdarzenie dragend lub click.

Answer 2

Od wersji 4.9.0 istnieje .clickDistance(), za pomocą którego można kontrolować, po której odległości przesunięto się od miejsca, w którym rozpoczęto przeciąganie, i nie zostanie wydane zdarzenie click.

Zauważ, że można dostać każdą imprezę click w ogóle, jeśli usunąć element z DOM przed zwolnieniem przycisku (na przykład za pomocą .raise() w przewodnika drag).