D3マウスイベント - あなたはこのようなドラッグ機能定義されている場合、D3で

Question

をクリック＆dragendイベント：

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

をあなたは本当に、次の操作を行うことはできません。

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

理由は、クリックをすることですその後、 "引っ張る"が発射されます。私の意見では、ドラッグとクリックの間に大きな違いがあるので、クリックするための別個のイベントがあるはずです。

SVG要素のドラッグイベントのクリックと終了を区別するためには、どのような解決策がありますか？

Answer 1

The documentationは、このためのいくつかの明確な例があります。

ドラッグ可能な要素に独自のクリックリスナを登録するとき、あなたは次のようにクリックイベントが抑制されたかどうかを確認することができます。

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

このとすぐ後の例のstopPropagation()を使用すると、発生させて処理するイベントを制御できます。

ドラッグエンドとクリックイベントを区別することは、完全にあなたに任されています。これを行う最も簡単な方法は、おそらくドラッグが行われたときにフラグを設定し、そのフラグを使用してdragendまたはclickイベントを処理する必要があるかどうかを判断することです。

Answer 2

4.9.0以来、あなたが制御することができる.clickDistance()がどこから移動したのかを制御することができます。ドラッグした場所から移動すると、clickイベントは発生しません。

ボタンを解放する前にDOMから要素を削除すると（、dragハンドラ内の要素を削除すると）、clickイベントが発生する可能性があります。