Supprime toujours un événement de clic après la mise en page d3

Le découplage des événements de clic et de glisser est abordé dans certaines questions précédentes ici, par exemple celle-ci

Généralement, il est recommandé d'utiliser if (d3.event.defaultPrevented === false) {...} dans le gestionnaire de clics. Cependant, cela ne semble pas fonctionner (au moins dans certains navigateurs) si mouseup et mousedown ne sont pas dans le même élément. Considérez ce jsfiddle (code ci-dessous). Voici le comportement que je veux: cliquez n'importe où dans le déclencheur de SVG déclenchez un événement (le rectangle clignote), faites glisser n'importe où en SVG entraîne le rectangle. Comportement observé (Chrome 33): si le mousedown du clic se trouve à l'intérieur du rectangle et que la souris est à l'extérieur, les événements de glisser et de cliquer déclenchent. Si mousedown et mouseup sont à l'intérieur ou les deux sont à l'extérieur, l'événement de clic n'est pas déclenché.

Quelqu'un peut-il expliquer pourquoi l'événement de clic est déclenché si la souris et le mousedown ne sont pas dans le même élément et comment empêcher de façon fiable que cela ne se produise pas?

 var container, rect, dragBehavior; svg = d3.select('svg').attr("width", 500).attr("height", 300); container = svg.append('g'); rect = container.append('rect').attr('width', 100).attr('height', 100); dragBehavior = d3.behavior.drag() .on('dragend', onDragStart) .on('drag', onDrag) .on('dragend', onDragEnd); svg.call(dragBehavior).on('click', onClick); function flashRect() { rect.attr('fill', 'red').transition().attr('fill', 'black'); } function onDragStart() { console.log('onDragStart'); } function onDrag() { console.log('onDrag'); var x = (d3.event.sourceEvent.pageX - 50); container.attr('transform', 'translate(' + x + ')'); } function onDragEnd() { console.log('onDragEnd'); } function onClick(d) { if (d3.event.defaultPrevented === false) { console.log('onClick'); flashRect(); } else { console.log("default prevented"); } } 

• Changer la taille de la bulle dans Scatter Plot pour c3.js
• Possibilité d'utiliser une configuration de cercle dans d3.js avec une taille de cercle fixe?
• D3.js: comment utiliser la fonction de carte?
• Définir un problème d'identification dans d3
• Création de plus d'un tableau pour le jeu de données

• Étiquette / barre courbée hybride d3.js, diagramme circulaire
• Pause de ligne pour d3 circle title tooltipText
• Comment mettre à jour le graphique circulaire en utilisant d3.js
• Capture / Enregistrement de l'état actuel de d3.js Sunburst Chart
• Graphique dirigé – niveau CSS de niveau nœud

 rect .call(dragBehavior) .on('click', onClick);