javascript - D3 鼠标事件——Click & DragEnd

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”触发之后触发。在我看来，应该有一个单独的点击事件，因为我看到 dragend 和 click 之间存在巨大差异。

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

score 48 · Accepted Answer

该文档为此提供了一些明确的示例：

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

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

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

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

score 1 · Accepted Answer

从 4.9.0 开始.clickDistance()，您可以控制移动距离（从您开始拖动的位置）之后您将不会收到click事件。

请注意，click如果您在释放按钮之前从 DOM 中删除元素（例如，通过.raise()在drag处理程序中使用），您可能会收到任何事件。

2 回答 2