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

Question

当我尝试创建一个新的 d3.drag() 函数并将其绑定(bind)到我的选择时，即使我没有移动鼠标(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 和“drag”不会触发。现在点击为真，但也触发了“拖动”。

Answer 1

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

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

click fires after both the mousedown and mouseup events have fired, in that order.

Source: see MDN docs on mouse-related events

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

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