web-dev-qa-db-fra.com

Événements de souris D3 - Click & DragEnd

Dans D3, si vous avez défini une fonction de glisser comme ceci:

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

Vous ne pouvez vraiment pas faire ce qui suit:

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

La raison est que le clic sera déclenché après que le "dragend" sera déclenché. À mon avis, il devrait y avoir un événement distinct pour cliquer parce que je vois une énorme différence entre dragend et click.

Pour différencier le clic et la fin d'un événement de glissement dans un élément SVG, quelle serait la solution?

javascriptjavascript-eventssvgd3.js
20
FidEliO

La documentation contient quelques exemples explicites à ce sujet:

Lorsque vous enregistrez votre propre écouteur de clic sur des éléments déplaçables, vous pouvez vérifier si l'événement click a été supprimé comme suit:

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

Ceci, avec l'exemple stopPropagation() immédiatement après, vous permet de contrôler les événements déclenchés et gérés.

Pour être clair, faire la différence entre un événement de fin de glisser et un événement de clic vous incombe entièrement. La façon la plus simple de procéder consiste probablement à définir un indicateur lors du déplacement et à utiliser cet indicateur pour déterminer si un événement dragend ou click doit être géré.

48
Lars Kotthoff

Depuis la version 4.9.0, il y a .clickDistance() avec lequel vous pouvez contrôler la distance après laquelle vous vous êtes déplacé de l'endroit où vous avez commencé à faire glisser, vous ne recevez pas d'événement click.

Notez que vous pouvez obtenir un événement click du tout si vous supprimez l'élément du DOM avant de relâcher le bouton (par exemple, en utilisant .raise() dans le gestionnaire drag.).

0
phk