Cytoscape.js嵌入Webview后鼠标释放仍自动平移问题求助

DevOps 小满

2026-6-14

解决Cytoscape嵌入Webview后的异常平移问题

问题场景

纯React+CytoscapeComponent应用在Chrome浏览器中运行完全正常，但将其作为Webview嵌入其他项目后出现以下异常：

已配置：禁用节点单独平移，仅允许图表整体平移
触发流程：按住鼠标平移图表 → 保持按住状态将鼠标移出Webview并释放按键 → 仅将鼠标移回Webview时，Cytoscape会持续自动平移图表，即便未按住任何鼠标按键，需点击其他位置才能停止

尝试过以下代码但未解决问题：

context.cyRef.on("mouseout", function (event) {
    console.log("mouseout");
    context.cyRef.userPanningEnabled(false);
});

context.cyRef.on("mouseover", function (event) {
    console.log("mouseover");
    context.cyRef.userPanningEnabled(true);
});

问题原因

Cytoscape无法捕获到Webview外部触发的mouseup事件，导致它误以为鼠标仍处于按住状态，持续触发图表平移操作。

解决方案

可以通过调用Cytoscape的stop()方法强制终止当前交互状态，以下是两种可行实现：

方案1：监听全局`mouseup`事件

在组件挂载时给document绑定全局mouseup监听，一旦检测到鼠标释放，立即终止Cytoscape的所有用户交互操作：

useEffect(() => {
  const handleGlobalMouseUp = () => {
    context.cyRef?.stop();
  };

  document.addEventListener('mouseup', handleGlobalMouseUp);

  return () => {
    document.removeEventListener('mouseup', handleGlobalMouseUp);
  };
}, [context.cyRef]);

方案2：修改`mouseout`事件处理逻辑

将原有的禁用平移逻辑替换为直接终止当前操作：

context.cyRef.on("mouseout", function (event) {
    console.log("mouseout");
    // 终止所有正在进行的用户交互（包括平移）
    context.cyRef.stop();
});

context.cyRef.on("mouseover", function (event) {
    console.log("mouseover");
    context.cyRef.userPanningEnabled(true);
});