如何移除Antd Context-Menu关闭延迟？D3.js SVG上使用遇此问题

我之前也碰到过类似的情况——Antd的Dropdown作为右键菜单绑定在SVG上时，确实会出现关闭延迟的问题，哪怕设置了mouseLeaveDelay={0}也没效果。这主要是因为SVG的事件模型和普通HTML元素存在差异，Dropdown内置的自动关闭逻辑对SVG的事件捕获处理不够精准，导致延迟无法被消除。下面给你几个可行的解决办法：

方法一：完全手动控制菜单的显示/隐藏（最彻底的方案） #

放弃Dropdown的自动触发逻辑，通过监听SVG的右键事件和文档的点击事件来手动控制菜单的显示与隐藏，这样就能完全摆脱内置的延迟。

具体代码示例：

class YourD3Component extends React.Component {
  state = {
    isMenuVisible: false,
    menuPosition: { x: 0, y: 0 },
    contextMenu: {
      menu: (
        <Menu>
          <Menu.Item key="1" onClick={() => this.setState({ isMenuVisible: false })}>
            编辑节点
          </Menu.Item>
          <Menu.Item key="2" onClick={() => this.setState({ isMenuVisible: false })}>
            删除节点
          </Menu.Item>
        </Menu>
      )
    }
  };

  // 处理SVG的右键事件，打开菜单
  handleSvgContextMenu = (e) => {
    e.preventDefault(); // 阻止系统默认右键菜单
    this.setState({
      isMenuVisible: true,
      menuPosition: { x: e.clientX, y: e.clientY }
    });
  };

  // 点击文档任意位置关闭菜单
  handleDocumentClick = () => {
    this.setState({ isMenuVisible: false });
  };

  componentDidMount() {
    // 挂载时添加文档点击监听
    document.addEventListener('click', this.handleDocumentClick);
  }

  componentWillUnmount() {
    // 卸载时移除监听，避免内存泄漏
    document.removeEventListener('click', this.handleDocumentClick);
  }

  render() {
    const { isMenuVisible, menuPosition, contextMenu } = this.state;
    return (
      <div style={{ position: 'relative' }}>
        {/* 你的D3 SVG容器 */}
        <svg
          height='70vh'
          width='100%'
          onContextMenu={this.handleSvgContextMenu}
          style={{ pointerEvents: 'all' }} // 确保SVG能捕获鼠标事件
        >
          {/* 这里放你的D3绘制内容 */}
        </svg>

        {/* 手动控制的Dropdown菜单 */}
        <Dropdown
          overlay={contextMenu.menu}
          visible={isMenuVisible}
          onVisibleChange={(visible) => this.setState({ isMenuVisible: visible })}
          trigger={[]} // 关闭Dropdown的默认触发方式
          placement="bottomLeft"
          getPopupContainer={() => document.body} // 可选：将菜单挂载到body，避免被SVG裁剪
        >
          <span
            style={{
              position: 'absolute',
              left: menuPosition.x,
              top: menuPosition.y,
              visibility: 'hidden'
            }}
          />
        </Dropdown>
      </div>
    );
  }
}

这个方案的优势是完全由你控制菜单的开闭时机，没有任何内置延迟，而且菜单会精准出现在你右键点击的位置。

方法二：关闭Dropdown的动画并调整事件捕获 #

如果不想完全手动控制，可以尝试关闭Dropdown的过渡动画，同时确保SVG能正确触发鼠标事件：

<Dropdown
  mouseLeaveDelay={0}
  overlay={this.state.contextMenu.menu}
  trigger={['contextMenu']}
  animation={null} // 关闭菜单的显示/隐藏动画
  transitionName="" // 清空过渡类名
>
  <svg
    height='70vh'
    width='100%'
    style={{ pointerEvents: 'all' }} // 确保SVG能捕获鼠标事件
  >
    {/* D3内容 */}
  </svg>
</Dropdown>

不过这个方案的稳定性不如手动控制，因为还是依赖Dropdown的内部逻辑，部分场景下可能依然存在延迟。

方法三：直接调用Dropdown的关闭方法 #

你也可以通过ref获取Dropdown实例，在需要关闭的时候直接调用close()方法，比如在菜单点击后立即关闭：

class YourComponent extends React.Component {
  dropdownRef = React.createRef();

  handleMenuItemClick = () => {
    // 点击菜单项后立即关闭菜单
    this.dropdownRef.current?.close();
  };

  render() {
    const contextMenu = {
      menu: (
        <Menu>
          <Menu.Item key="1" onClick={this.handleMenuItemClick}>
            菜单项1
          </Menu.Item>
        </Menu>
      )
    };

    return (
      <Dropdown
        ref={this.dropdownRef}
        mouseLeaveDelay={0}
        overlay={contextMenu.menu}
        trigger={['contextMenu']}
      >
        <svg height='70vh' width='100%'></svg>
      </Dropdown>
    );
  }
}

这个方法能解决菜单项点击后的关闭延迟，但鼠标离开SVG时的延迟可能依然存在。

综合来看，方法一的手动控制方案是最推荐的，它能彻底解决所有场景下的关闭延迟问题，同时给你最大的灵活性。

内容的提问来源于stack exchange，提问作者lhlmgr