即使 dx 和 dy 为 0，d3 拖动也会触发事件答案

【问题标题】：d3 drag fires event even when dx and dy is 0即使 dx 和 dy 为 0，d3 拖动也会触发事件
【发布时间】：2019-05-23 11:27:15
【问题描述】：

当我尝试创建一个新的d3.drag() 函数并将其绑定到我的选择时，即使我没有在单击时移动鼠标（dx 和 dy = 0），“拖动”事件也会触发。当没有“拖动”时，我不想调用点击处理程序。

var drag = d3.drag()
        .on('start', dragStart)
        .on('drag', dragging)
        .on('end', dragEnd);

viewPort.on('click', function () {
        clicked = true;
        })
        .call(drag);

我希望 clicked = true 并且当我在单击时不移动鼠标时“拖动”不会触发。现在 clicked 是真的，但是“drag”也会被触发。

【问题讨论】：

就是这样：mousedown 事件将触发 dragstart 事件，根据 API documentation。为了避免这种情况，当 dx 或 dy 不为零时调用处理程序，即通过保护子句或类似的东西。
感谢您的回答。 @Terry，所以您的意思是“拖拽”事件中的警卫尝试了这一点，并且像魅力一样工作。我认为“拖动”事件应该只在鼠标移动时触发......
@MrDeibl 查看我更新的答案，解释为什么我们不能选择在没有 mousemove 事件的情况下不触发拖动事件：那是因为在注册任何移动之前触发了 mousedown，所以那时我们不知道鼠标是否移动了。

标签： javascript d3.js

【解决方案1】：

详细说明我的评论：mousedown event will fire the dragstart event in d3.js，所以你不能真正阻止回调被调用。根据定义，这意味着dragstart 总是在注册click 事件之前触发，这就是为什么您不能阻止在单击时调用的事件处理程序中触发dragstart。单击并释放元素时发生的事件链：

mousedown 事件被触发：这会触发 d3.js 中的dragstart 事件
mouseup 事件被触发：这会触发 d3.js 中的dragend 事件
click 事件被触发

click 在mousedown 和mouseup 事件按此顺序触发后触发。

Source: see MDN docs on mouse-related events

这也意味着dragstart 事件将始终触发，即使没有光标/指针/鼠标移动，因为在那个时间点，浏览器不知道是否检测到任何移动，当@987654336 @事件被触发。

但是，您可以做的是设置某种保护子句，如果事件的dx 和dy 根本不允许在回调中进一步执行逻辑注册为零。

【讨论】：