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

Question

当我尝试创建新的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，并且当我不移动鼠标单击时不会触发“拖动”。现在单击的是正确的，但还会触发“拖动”。

Answer 1

更多地谈谈我的评论：mousedown event will fire the dragstart event in d3.js，因此您无法真正阻止调用回调。顾名思义，这意味着dragstart总是在注册click事件之前触发，这就是为什么您不能阻止dragstart在调用bu click的事件处理程序中触发的原因。单击并释放元素时发生的事件链：

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

  

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

     

Source: see MDN docs on mouse-related events

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

您可以要做的是设置某种保护子句，如果dx和{{1}，则该子句根本不允许在回调中进一步执行逻辑}设为零。