即使鼠标不移动，D3'Drag'事件也会触发

Posted 2021-03-30

我注意到，当我使用d3.drag().on('drag',...)时，即使没有移动鼠标也会触发。使用下面的代码片段（我从this question中提取），如果我只是单击并释放，我仍然在控制台中看到drag event 1。

这是一个问题，因为我希望能够区分dblclick和拖拽。我看过this post和this one，但一直无法使这些解决方案起作用（可能是因为那些是旧的答案而我正在使用D3 v4）。我注意到在fiddle的one of the answers中，它显示了同样的问题：点击事件和拖动事件。

我认为drag事件只会在鼠标移动时触发，然后我可以用它来设置一个标记，将其标记为拖动，而不是双击。但是，如果在鼠标按下时触发拖动，则此功能无效。

非常愿意接受关于这一点的建议，以及解释为什么drag以这种方式行事。我意识到这取决于浏览器，因此我运行的是Chrome 64。

var count = 0;
d3.select("svg").call(d3.drag().on("start", function() {
  console.log("drag started")
}).on("drag", function() {
  ++count; 
  console.log("drag event " + count)
}).on("end", function() {
  count = 0;
  console.log("drag ended")
}))

.as-console-wrapper { max-height: 20% !important;}
svg {
  border: 1px solid black;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

答案

我确实提出了以下解决问题的工作。基本上只需保存拖动start上的鼠标位置，然后检查鼠标是否已移动拖动drag。

虽然这有效，但我有点认为drag已经在做这样的事情了，或者那里会有更清洁的解决方案。很想知道某人是否有更好的东西！

var count = 0;
var dragStartPos = {};

d3.select("svg").call(d3.drag().on("start", function() {
  console.log("drag started")
  dragStartPos.x = d3.event.x;
  dragStartPos.y = d3.event.y;
}).on("drag", function() {
  if(d3.event.x != dragStartPos.x ||
    	d3.event.y != dragStartPos.y) {
      ++count; 
      console.log("drag event " + count)
  }
}).on("end", function() {
  count = 0;
  console.log("drag ended")
}))

.as-console-wrapper { max-height: 20% !important;}
svg {
  border: 1px solid black;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

另一答案

所以d3.drag有一个你可以打电话的clickDistance()功能。这允许在触发拖动事件之前在mousedown和mouseup之间容差，并且可能正是您正在寻找的。

const drag = d3.drag()
               .clickDistance(10)
               .on("start", () => { console.log("drag started"); })
               .on("drag", () => { console.log(`moved by ${d3.event.dx},${d3.event.dy}`); });

通常这是因为你实际上是在mousedown和mouseup之间略微移动鼠标，但只是非常轻微。我今天一直在看类似的事情，可能大概有25％的时间我不小心移动鼠标（使用触摸问题变得更糟）。

还要注意，因为你没有真正提到它，但存在一个你可以订阅的dblclick事件。请注意，使用dblclick时的事件顺序如下所示（单击未被抑制）：

• 点击
• 点击
• DBLCLICK

另一答案

对不起，这是一个答案，我还没有足够的代表发表评论。

我没有看到d3.drag().on('drag',...)在没有移动鼠标的情况下被解雇。我在mousedown上获得了一个start事件，而mousep上的end事件和drag事件仅在实际拖动时触发。这是我迄今为止尝试过的所有浏览器的行为（Chrome 63，FF 58，IE11）。这似乎与d3.drag API Reference一致

以上是关于即使鼠标不移动，D3'Drag'事件也会触发的主要内容，如果未能解决你的问题，请参考以下文章

用d3.behavior.drag拖拽的时候为啥svg图是默认的左上角跟随鼠标的移动吗

用js控制div跟随鼠标移动，鼠标点击后，鼠标离开，div留在当前点击的位置怎么做

React v16-d3 v4，当使用来自d3-selection的鼠标时会得到，TypeError：无法读取属性'sourceEvent'的null？

在 d3.js 中更新剪辑路径？

如何执行d3拖放

即使拦截鼠标事件，Qt 窗口也会移动