d3.js - 可能的 d3 错误 : dragend fires without any drag event

Question

我正在使用 d3js 拖动行为。这是 demo .当我点击元素时，“拖动”和“拖动”事件被触发。即使我不尝试拖动它们，事件仍然会触发。我想在单击项目时调用其他一些函数。只有在拖动项目时才应触发拖动事件。那么如何在这里分离出拖动事件和点击事件。

function onDragDrop(dragHandler, dropHandler) {
    var drag = d3.behavior.drag();

drag.on("drag", dragHandler)
.on("dragend", dropHandler);
return drag;
}

  var d = [{ x: 20, y: 20 }];

    var g = d3.select("body").select("svg").data(d).append("g").attr("transform", function (d) { return        "translate(" + d.x + "," + d.y + ")"; })
     .call(onDragDrop(dragmove, dropHandler));

g.append("rect")
.attr("width", 40)
.attr("height", 40)
.attr("stroke", "red")
.attr("fill","transparent")
.attr("x", "20" )
.attr("y", "20")

g.append("text")
.text("Any Text")
.attr("x", "20" )
.attr("y", "20")

function dropHandler(d) {
    alert('dropped');
}

function dragmove(d) {
  alert('dragged');
  d.x += d3.event.dx;
  d.y += d3.event.dy;
  d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
 }

Answer 1

编辑 3

这是对您的备选答案帖子的回应。您在那里发布的 fiddle 并不能准确反射(reflect)我试图描述的解决方案。我更新了它。下面的 fiddle 应该是区分点击和“真实”拖动事件的正确方法的示例。请注意，我们没有使用“点击”处理程序。

http://jsfiddle.net/V92CF/

编辑2

好的，我在 d3 google 组上发布了这个问题，并得到了 Jason Davies 的回答。我们看到的行为是预期的行为，不是错误。 “点击”被简单地认为是一个微不足道的(移动了 0 个像素)拖动，但它仍然是一个拖动。 d3 的创建者 Mike 解释了这里的原因:

https://github.com/mbostock/d3/pull/368

因此，您的问题的正确解决方案是我之前描述为 hack 的解决方案:您需要检测是否确实在 dragend 处理程序内部进行了移动，然后仅在有移动时才触发您的逻辑。

编辑

请注意我下面的原始答案是错误的。我误解了这个问题。下面的评论和我对 OP 的编辑应该澄清

下方为原帖

这里唯一的问题是使用 alert。我将所有 alert 更改为 console.log，它工作正常:

http://jsfiddle.net/TrWw3/

我认为它与警报混淆了，因为一旦您开始拖动，它就会触发警报框，这需要您将其关闭。但是当你关闭它时，鼠标已经跳动了，而且这个过程中的某些东西把事情搞砸了。

无论如何，打开 chrome 或 firefox js 控制台的 console.log 会很好地修复你。