In version 5.x, the node text is placed inside (center) and the mouse hovers over the text will trigger pointerout #6292

从两种情况来分析你的问题。

1、假设你使用的是内置节点，那么可以使用pointerEvents来阻止鼠标事件响应。

具体用法：

const graph = new Graph({
  container: xxx,
  node: {
    type: "rect",
    style: {
      // 增加这个配置
      pointerEvents: "none",
    },
  },
});

2、假设你使用的是 React 自定义节点，那么应该在组件内部阻止事件冒泡。

const YourNode: React.FC = () => {
  return (
    <Flex 
      // 增加这两个配置
      onMouseEnter={(e) => e.stopPropagation()}
      onMouseLeave={(e) => e.stopPropagation()}
  >
  自定义节点内容
  </Flex>
);
};

从两种情况来分析你的问题。

1、假设你使用的是内置节点，那么可以使用pointerEvents来阻止鼠标事件响应。

具体用法：

const graph = new Graph({
  container: xxx,
  node: {
    type: "rect",
    style: {
      // 增加这个配置
      pointerEvents: "none",
    },
  },
});

2、假设你使用的是 React 自定义节点，那么应该在组件内部阻止事件冒泡。

const YourNode: React.FC = () => {
  return (
    <Flex 
      // 增加这两个配置
      onMouseEnter={(e) => e.stopPropagation()}
      onMouseLeave={(e) => e.stopPropagation()}
  >
  自定义节点内容
  </Flex>
);
};

使用的内置节点 pointerEvents: "none"加上后，鼠标移动到节点的时候不会触发事件，移动到label文字上面才会触发hover

参考下吧。反复理解下 State 文档

状态(State)是指元素存在的状态，例如选中、悬停、激活等。状态可以使得元素在不同的状态下展示不同的样式，帮助用户更直观的理解图中的信息。

const graph = new Graph({
  container: xxx,
  node: {
    type: "rect",
    style: xxx,
    // node 状态映射 对象
    // 状态： https://g6-next.antv.antgroup.com/manual/core-concept/state
    state: {
      // 激活行为的样式：背景色
      active: {
        // 背景色：绿色
        fill: "#36ce1f",
      },
    },
  },
  edge: xxx,
  layout: xxx,
  // 增加 悬停激活 交互
  // 内置交互：https://github.com/antvis/G6/blob/1089e63d62a6c0796a7fa1be6dd6031603b0e3b4/packages/g6/src/registry/build-in.ts#L117
  behaviors: [ "hover-activate"],
  // plugins: 'tooltip',
});

<details> <summary>效果</summary>

hover node 或 label ，背景色都正常变绿，也不会提前移除样式。

<img width="1139" alt="图片" src="https://github.com/user-attachments/assets/e745f82d-966e-4f2c-a853-f18aa9c5bfb4">

</details>

使用behaviors: [ "hover-activate"] 鼠标移到label上state定义的样式不会移除，但是目前的需求使用behaviors无法满足，所以监听了node:pointerenter给指定节点添加样式，然后node:pointerout移除添加的样式，但是问题是鼠标移动到node之后继续移动到label上他会触发node:pointerout，那我自定义添加的样式移除了，鼠标还在node内部，功能就有问题了。 这个图上是鼠标移动到node（node:pointerout）继续移动到label（node:pointerout）移出label（node:pointerout）移出node（node:pointerout）这个过程触发的事件

你前面回答的pointerEvents: "none"这个属性设置之后鼠标移动到node不会触发node:pointerenter 只有鼠标移动到label上才会触发，out事件也是从label移开触发。

使用behaviors: [ "hover-activate"] 鼠标移到label上state定义的样式不会移除，但是目前的需求使用behaviors无法满足，所以监听了node:pointerenter给指定节点添加样式，然后node:pointerout移除添加的样式，但是问题是鼠标移动到node之后继续移动到label上他会触发node:pointerout，那我自定义添加的样式移除了，鼠标还在node内部，功能就有问题了。 这个图上是鼠标移动到node（node:pointerout）继续移动到label（node:pointerout）移出label（node:pointerout）移出node（node:pointerout）这个过程触发的事件

你前面回答的pointerEvents: "none"这个属性设置之后鼠标移动到node不会触发node:pointerenter 只有鼠标移动到label上才会触发，out事件也是从label移开触发。

node:pointerleave用leave事件已解决

node:pointerleave用leave事件已解决

很抱歉之前确实没有理解清楚你的问题，有点答非所问了。

我去查了下pointerleave和pointerout的这两个事件的区别，的确应该在完全离开所有元素的时候才执行。

• pointerleave：
  • 不会冒泡。
  • 仅当指针完全离开元素及其所有子元素时触发。
  • 只在完全离开时触发一次。
• pointerout：
  • 会冒泡。
  • 当指针离开元素本身，或进入其子元素时都会触发。
  • 可能触发多次。

node:pointerout用leave事件已解决

很抱歉之前确实没有理解清楚你的问题，有点答非所问了。

我去查了下pointerleave和pointerout的这两个事件的区别，的确应该在完全离开所有元素的时候才执行。

• pointerleave：

  • 不会冒泡。
  • 仅当指针完全离开元素及其所有子元素时触发。
  • 只在完全离开时触发一次。

• pointerout：

  • 会冒泡。
  • 当指针离开元素本身，或进入其子元素时都会触发。
  • 可能触发多次。

先入为主一直围绕out事件了，后面发现还有leave事件，后面自己去查了才发现两者的区别。

behaviors: [ "hover-activate"] 监听onHoverEnd, 在鼠标移出label的时候会触发，这个时候hover的样式还没移除，onHoverEnd的event.type 是pointerout 这里onHoverEnd的机制应该是和pointerleave一致才对，event.type 应该是 pointerleave 这样监听和state才是一致的