D3鼠标事件 - 点击& DragEnd [英] D3 Mouse Events -- Click & DragEnd

问题描述

在D3中，如果您定义了如下的拖动函数：

In D3, if you defined a drag function like this:

var drag = d3.behavior.drag()
        .on("drag", function () {alert("drag")})
        .on("dragend", function () {alert("dragEnd")});

你真的不能做以下事情：

You really cannot do the following:

d3.select("#text1")
.on("click", function(d,i) {alert("clicked")})
.call(drag);

原因是，在dragend触发后，点击将被触发。在我看来，应该有一个单独的事件，因为我看到dragend和点击之间的巨大差异。

Reason is that the click will get fired after that the "dragend" will fire . In my opinion there should be a separate event for clicking because I see a huge difference between dragend and click.

要区分点击和拖动事件的结束在SVG元素，解决方案是什么？

To differentiate between clicking and end of a dragging event in an SVG element, what would be the solution?

推荐答案

文档有一些明显的例子：

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

When registering your own click listener on draggable elements, you can check whether the click event was suppressed as follows:

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

这与 stopPropagation（）

要清楚，拖动结束和点击事件之间的区别完全在于你。最简单的方法是在拖动时设置一个标志，并使用该标志确定 dragend 或是否点击事件应该处理。

To be clear, differentiating between a drag end and click event is entirely down to you. The easiest way to do this is probably to set a flag when dragging takes place and use that flag to determine whether a dragend or click event should be handled.

这篇关于D3鼠标事件 - 点击& DragEnd的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！