it-swarm.com.de

D3-Mausereignisse - Klicken und Ziehen

Wenn Sie in D3 eine Ziehfunktion wie folgt definiert haben:

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

Sie können wirklich nicht folgendes tun:

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

Grund ist, dass der Klick ausgelöst wird, nachdem der "Dragend" ausgelöst wurde. Meiner Meinung nach sollte es ein separates Ereignis zum Klicken geben, da ich einen großen Unterschied zwischen Ziehen und Klicken sehe.

Was wäre die Lösung, um zwischen Klicken und Ende eines Ziehereignisses in einem SVG-Element zu unterscheiden?

20
FidEliO

Die Dokumentation hat einige explizite Beispiele dafür:

Wenn Sie Ihren eigenen Klicklistener für ziehbare Elemente registrieren, können Sie wie folgt prüfen, ob das Klickereignis unterdrückt wurde:

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

Zusammen mit dem stopPropagation()-Beispiel unmittelbar danach können Sie steuern, welche Ereignisse ausgelöst und behandelt werden.

Die Unterscheidung zwischen einem Ziehende- und Klickereignis liegt ganz bei Ihnen. Am einfachsten ist es, wenn Sie beim Ziehen ein Flag setzen und mit diesem Flag bestimmen, ob ein dragend- oder ein click-Ereignis behandelt werden soll.

48
Lars Kotthoff

Seit 4.9.0 gibt es .clickDistance() , mit dem Sie steuern können, nach welcher Entfernung von dem Startpunkt, an dem mit dem Ziehen begonnen wurde, Sie kein click-Ereignis erhalten.

Beachten Sie, dass Sie möglicherweise ein click -Ereignis erhalten, wenn Sie das Element vor dem Loslassen der Schaltfläche aus dem DOM entfernen (z. B. mit .raise() im drag-Handler).

0
phk