web-dev-qa-db-ja.com

D3マウスイベント-クリックとドラッグエンド

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要素内のドラッグイベントのクリックと終了を区別するための解決策は何ですか？

javascriptjavascript-eventssvgd3.js
20
FidEliO

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

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

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

これは、直後のstopPropagation()の例とともに、どのイベントを起動して処理するかを制御できます。

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

48
Lars Kotthoff

4.9.0以降、 .clickDistance() があり、これを使用して、ドラッグを開始した場所からどの距離を移動した後、clickイベントを取得できなくなります。

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

0
phk