Eventi del mouse D3: fai clic e trascina fine

In D3, se hai definito una funzione di trascinamento come questa:

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

Non puoi davvero fare quanto segue:

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

Il motivo è che il clic verrà generato dopo che il “dragend” sparerà. Secondo me, dovrebbe esserci un evento separato per fare clic perché vedo un’enorme differenza tra il trascinamento e il clic.

Per distinguere tra il clic e la fine di un evento di trascinamento in un elemento SVG, quale sarebbe la soluzione?

La documentazione ha alcuni esempi espliciti per questo:

Quando si registra il proprio listener di clic sugli elementi trascinabili, è ansible verificare se l’evento click è stato soppresso come segue:

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

Questo, insieme all’esempio stopPropagation() subito dopo, ti consente di controllare quali eventi vengono generati e gestiti.

Per essere chiari, la differenza tra un evento di fine trascinamento e un clic è interamente a te. Il modo più semplice per farlo è probabilmente impostare un flag quando avviene il trascinamento e usare quel flag per determinare se un evento dragenddragendclick debba essere gestito.

Dal 4.9.0 c’è .clickDistance() con il quale puoi controllare dopo quale distanza spostata da dove inizia il trascinamento non otterrai un evento click .

Nota che potresti ottenere qualsiasi evento click se rimuovi l’elemento dal DOM prima del rilascio del pulsante (ad esempio utilizzando .raise() nel gestore di drag ).