Question

我正在使用d3js拖动行为。这是demo。当我点击元素时，'drag'和'dragend'事件被触发。即使我不试图拖动它们，事件仍然会发生。我想在点击项目时调用其他一些功能。只有当我拖动项目时才应该触发拖动事件。那么如何在这里分离拖动事件和点击事件。

<>

Answer 1

编辑3

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

http://jsfiddle.net/V92CF/

编辑2

好的，我在d3 google小组上发布了这个问题，得到了Jason Davies的答案。我们看到的行为是预期的行为，它不是一个错误。 “点击”简单地被认为是一个trival（0像素移动）拖动，但它仍然是一个拖动。迈克，d3的创造者，解释了这里的推理：

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

因此，对你的问题的正确解决方案就是我之前描述的一个hack：你需要检测一下是否已经在dragend处理程序中实际进行了一次移动，然后只触发你的逻辑。

修改

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

以下原帖

这里唯一的问题是使用alert。我将所有alert更改为console.log s并且工作正常：

http://jsfiddle.net/TrWw3/

我认为它与警报混淆了，因为一旦你开始拖动，它就会触发警告框，这需要你关闭它。但是当你关闭它的时候，鼠标已经跳了起来，关于这个过程的一些事情正在搞乱。

无论如何，使用chrome或firefox js控制台打开的console.log会让你感觉很好。

Answer 2

因为我没有得到预期的答案，所以我给了一个替代方案来实现这一点。希望有人有一些答案。并再次感谢@jonah。如果你发现这方面的任何更新，请告诉我。这是Alternate way来执行此操作。

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

  var g = d3.select("svg").data(d).append("rect")
    .attr("width", 40)
    .attr("height", 40)
    .attr("stroke", "red")
    .attr("fill","transparent")
    .attr("x", "20" )
    .attr("y", "20")
    .on("click", function(){ console.log('clicked');})
   .call(d3.behavior.drag().on("drag", dragHandler).on("dragend", dropHandler))

 function dropHandler(d) {
       if(flag){
            console.log('dropped');
            flag = false;
        }}

 function dragHandler(d) {
        flag = true;
        console.log('dragged');
        d.x += d3.event.dx;
        d.y += d3.event.dy;
        d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
    }

可能d3 Bug：dragend在没有任何拖动事件的情况下触发

2 个答案:

编辑3

编辑2

修改

以下原帖