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

Answer 1

该文档有一些明确的例子:

在可拖动元素上注册您自己的单击侦听器时,您可以检查单击事件是否被抑制,如下所示:

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

这个以及stopPropagation()之后的示例允许您控制触发和处理的事件.

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