Question

我注意到当我使用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>

Answer 1

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

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

＆＃13;

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")
}))

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

因此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

Answer 3

很抱歉这是一个答案，我还没有足够的代表发表评论。

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

一致

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

3 个答案: