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

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

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

文档 https://github.com/mbostock/d3/wiki/Drag-Behavior#wiki-on有一些明确的例子：

在可拖动元素上注册自己的点击监听器时，可以检查点击事件是否被抑制，如下所示：

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

这，连同stopPropagation()紧接着的示例，允许您控制触发和处理哪些事件。

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