时间戳

首页 > 解决方案 > 即使 dx 和 dy 为 0，d3 拖动也会触发事件

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

问题描述

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

标签： javascriptd3.js

解决方案

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

  1. mousedown事件被触发：这会触发dragstartd3.js 中的事件
  2. mouseup事件被触发：这会触发dragendd3.js 中的事件
  3. 事件click被触发

clickmousedown在和mouseup事件都按顺序触发后触发。

来源：查看 MDN 文档关于鼠标相关的事件

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

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

推荐阅读