D3 鼠标事件——Click & DragEnd答案

【问题标题】：D3 Mouse Events -- Click & DragEndD3 鼠标事件——Click & DragEnd
【发布时间】：2013-09-29 07:01:46
【问题描述】：

在 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 元素中拖动事件的单击和结束，解决方案是什么？

【问题讨论】：

【解决方案1】：

The documentation 有一些明确的例子：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

这是否在相反的方向工作？在点击距离以下的地方，您没有得到拖动事件？
@BallpointBen 我猜没有，但是如果您有特定的用例，请将其作为功能请求发布到github.com/d3/d3-drag/issues（最好使用使用blockbuilder.org 或observablehq.com 创建的演示）。跨度>