在 react-konva 中使用 onMouseOver 将鼠标悬停在元素顶部的图标上答案

【问题标题】：Hovering over icons on top of an element with onMouseOver in react-konva在 react-konva 中使用 onMouseOver 将鼠标悬停在元素顶部的图标上
【发布时间】：2020-04-01 00:43:30
【问题描述】：

我有一个<Group/> 元素，其中包含一个矩形和一组图标，这些图标只有在用户将光标移动到<Group/> 内容的边界内时才可见。图标是否显示由附加到<Group/> 对象的onMouseOver 和onMouseOut 事件处理程序触发。我使用useState 挂钩来保存悬停状态并隐藏/显示图标。

显示图标onMouseOver 工作正常。但是每当鼠标光标悬停在图标上时，就会触发<Group/> 的onMouseOut 事件，从而隐藏图标。将鼠标移到图标上会快速显示/隐藏它们（闪烁）。

有没有办法强制<Group/>不触发onMouseOut 事件，如果光标实际上仍在其区域内但位于图标顶部（事件冒泡？）？

【问题讨论】：

标签： konvajs react-konva

【解决方案1】：

可以通过使用React.useRef() 在元素发生更改时存储元素的悬停状态并使用延迟函数中的引用来决定要做什么来解决此问题。本质上是这样的：

设置状态、引用和更新引用：

...

    const [isGroupHover, setIsGroupHover] = useState(false);
    const [isContextMenuHover, setIsContextMenuHover] = useState(false);

    const isContextMenuHovereRef = useRef(isContextMenuHover);
    const isGroupHoverRef = useRef(isGroupHover);

    useEffect(() => {
      isContextMenuHovereRef.current = isContextMenuHover;
      isGroupHoverRef.current = isGroupHover;
    }, [isGroupHover, isContextMenuHover]);

...

拦截<Group/>的onMouseOut事件

...

    const onMouseOut = (e): void => {
      setTimeout(() => {
        if (!isContextMenuHovereRef.current) {
          setIsGroupHover(false);
        }
      }, 350);
    };

...

一个函数 (setIsContextMenuHover()) 通过 prop 传递给上下文菜单组件。这样，上下文菜单可以将它自己的悬停状态向上传递。

...

<ContextMenu setOnHover={setIsContextMenuHover} />

...

基本上，如果上下文菜单仍然可见或悬停在上面，这可以防止更改 <Group/> 的悬停状态。有点笨拙 - 但它有效。

【讨论】：

【解决方案2】：

如果你的图标不是交互式的并且你不需要为它们监听事件，你可以设置listening = false。

在这种情况下，一个节点将从命中图中删除并且不会触发mouseenter。

【讨论】：

图标是交互式的，设置listening=false会阻止它们工作。