javascript - D3 鼠标事件——单击和拖动结束

Question

在 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);

原因是点击将在“dragend”触发之后被触发。在我看来，应该有一个单独的点击事件，因为我发现拖尾和点击之间存在巨大差异。

要区分 SVG 元素中的单击和拖动事件的结束，解决方案是什么？

Answer 1

The documentation有一些明确的例子:

When registering your own click listener on draggable elements, you can check whether the click event was suppressed as follows:

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

这与随后的 stopPropagation() 示例一起，允许您控制触发和处理哪些事件。

需要明确的是，区分拖动结束和单击事件完全取决于您。最简单的方法可能是在拖动时设置一个标志，并使用该标志来确定是否应处理 dragend 或 click 事件。