21

D3 で、次のようなドラッグ関数を定義した場合:

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 要素のドラッグ イベントのクリックと終了を区別するには、どのような解決策がありますか?

4

2 に答える 2

48

ドキュメントには、これに関するいくつかの明示的な例があります。

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

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

stopPropagation()これは、直後の例とともに、どのイベントが発生して処理されるかを制御することを可能にします。

明確にするために、ドラッグ終了イベントとクリック イベントを区別するのは完全にあなた次第です。これを行う最も簡単な方法は、ドラッグが発生したときにフラグを設定し、そのフラグを使用してdragendまたはclickイベントを処理する必要があるかどうかを判断することです。

于 2013-09-29T11:23:16.003 に答える
1

4.9.0 以降.clickDistance()、(ドラッグを開始した場所から) 移動した距離を制御できる があり、clickイベントは発生しません。

clickボタンを離す前に DOM から要素を削除すると (たとえば、ハンドラで を使用.raise()して)、何らかのイベントが発生する可能性があることに注意してください。drag

于 2018-02-05T15:00:12.760 に答える