本文介绍在 sigma.js 中正确区分用户点击与拖拽行为的方法，通过记录鼠标按下和释放位置的偏移量，仅在位移小于阈值时才响应 clicknode 事件，从而防止拖拽后松开鼠标意外打开 url。
在 Sigma.js 应用中，同时监听 clickNode 和拖拽（downNode + mousemovebody + mouseup）事件时，一个常见痛点是：拖拽结束后松开鼠标会错误触发 clickNode 事件，导致本应仅在纯点击时跳转的 pageURL 被意外打开。根本原因在于 Sigma.js 的 clickNode 事件默认不感知拖拽意图——只要鼠标在节点上按下并抬起（无论是否移动），且未被其他逻辑拦截，就会派发该事件。
解决思路是引入“点击有效性判定”机制：仅当鼠标按下与抬起的坐标偏移极小时，才视为有效点击。这需要在 mousedown 阶段记录初始位置，在 mouseup 阶段计算位移，并动态控制 clickNode 的执行开关。
以下是经过验证的完整解决方案（含关键注释）：
const delta = 10; // 允许的最大偏移像素（可调，建议 5–15px）
let startX: number | null = null;
let startY: number | null = null;
let allowClick = true; // 默认允许点击，由 mouseup 动态更新
// 在 mousedown 时记录起始坐标（注意：使用原生 event.pageX/Y，非 viewportToGraph）
renderer.getMouseCaptor().on("mousedown", (event) => {
startX = event.original.pageX;
startY = event.original.pageY;
// 同步启用自定义包围盒（防拖拽时自动缩放干扰）
if (!renderer.getCustomBBox()) {
renderer.setCustomBBox(renderer.getBBox());
}
});
// 在 mouseup 时判断是否为有效点击，并重置拖拽状态
renderer.getMouseCaptor().on("mouseup", (event) => {
if (draggedNode) {
// 清除高亮
graph.removeNodeAttribute(draggedNode, "highlighted");
// 计算实际像素位移
const diffX = Math.abs(event.original.pageX - (startX ?? 0));
const diffY = Math.abs(event.original.pageY - (startY ?? 0));
// 仅当 X 和 Y 方向位移均小于阈值时，才允许后续 clickNode 触发
allowClick = diffX < delta && diffY < delta;
// 重置拖拽状态
isDragging = false;
draggedNode = null;
}
});
// 在 clickNode 中增加 allowClick 校验
renderer.on("clickNode", ({ node }) => {
if (
!graph.getNodeAttribute(node, "hidden") &&
allowClick // ✅ 关键：仅在此为 true 时执行跳转
) {
window.open(graph.getNodeAttribute(node, "pageURL"), "_blank");
}
});⚠️ 重要注意事项：
- 勿在 downNode 中记录起始位置：downNode 是 Sigma 抽象层事件，其坐标可能已受视口变换影响；而 mousedown 提供原始屏幕坐标，更稳定可靠。
- delta 值需根据 UI 精度调整：过小（如 1）易因手抖误判为拖拽；过大（如 30）则削弱防误触效果。推荐从 10 开始测试。
- 无需修改原有拖拽逻辑：上述方案完全兼容你现有的 downNode → mousemovebody → mouseup 流程，仅新增坐标判定与开关控制。
- allowClick 是瞬态标志：每次 mouseup 后重置，确保单次操作独立判定，无状态残留风险。
此方案由 Sigma.js 社区资深贡献者 Michael Hamann 提出，已在生产环境验证。它轻量、可靠，且不依赖第三方库或复杂计时器（如 setTimeout），符合 Sigma.js 事件模型的设计哲学。
