Blazor 3.1 嵌套 onmouseover 事件

我有一个问题，嵌套 div 都有 onmouseover/onmouseout 事件。我有一个导航菜单，该菜单由 onmouseover 事件触发，从屏幕一侧弹出。在这个导航菜单中，我有一个弹出打开的子菜单，它也是由 onmouseover 事件触发的。两个打开事件独立工作得很好，但是当一起运行时，触发器似乎被外部 div 拦截（外部 div 打开，但内部 div 不执行任何操作）。

• 我尝试在父级和子级 div 上添加 @onmouseover:stopPropagation="true" ，但这没有产生任何效果。
• 我知道有人在谈论 Blazor 5 中 onmouseenter/onmouseleave 的方式与 html/js 类似，但距离 11 月还有很长的路要走，支持仍然悬而未决。

如果我错过了一个技巧，请告诉我。代码如下（省略了 C# 代码 - 只需相应地修改 CollapseNavicationFlag 和 ExpandSubmenu 标志字符串。）

Nav menu

<div id="nav-bar" class="@collapseNavigationFlag" @onmouseover="ExpandNavigation" @onmouseout="CollapseNavigation">


<div>
    <ul class="nav flex-column">
        foreach (var navigationItem in navigationSection.NavigationItems)
        {
            <NavMenuSubmenu />
        }
    </ul>
</div>

导航菜单子菜单

<li>
    <ul class="nav-submenu @expandSubmenu"
        @onmouseover="ExpandSubmenu"
        @onmouseout="CollapseSubmenu">
        @foreach (var navigationSubItem in NavigationItem.NavigationSubItems)
        {
            <li class="nav-submenu-item px-3">
                <a href="@navigationSubItem.Page">
                    @navigationSubItem.Title
                </a>
            </li>
        }
    </ul>
</li>

聚会有点晚了，但在网上寻找解决方案后，我终于找到了一个。

在 Blazor 应用程序的顶层创建文件 EventHandlers.cs 并使用以下代码填充它：

[EventHandler("onmouseleave", typeof(MouseEventArgs), true, true)]
[EventHandler("onmouseenter", typeof(MouseEventArgs), true, true)]
public static class EventHandlers {
}

现在您应该能够在 html 元素上声明事件回调，就像使用 @onmouseout 等一样。

<div id="nav-bar" class="@collapseNavigationFlag" @onmouseenter="ExpandNavigation" @onmouseleave="CollapseNavigation">

这是一个非常不明显且看似没有文档记录的解决方案，我通过破译半答案的 Blazor 讨论设法将其拼凑在一起。我不是 100% 确定该文件必须被称为 EventHandlers.cs，它可能不是我没有尝试过，而且我不是 100% 确定它必须放置在您的应用程序的顶层，我再次没有尝试过没试过。

我很高兴终于让它工作了，不确定这个方法的稳定性，到目前为止没有遇到任何问题，但不能排除任何奇怪的情况，因为我想 Blazor 不直接支持 onmouseenter/onmouseleave 是有原因的盒子？

对于此问题还有另一种解决方法，设置pointer-events:none;然而，在子元素的 css 上，此方法阻止了任何交互性，例如选项的颜色更改、鼠标滚动和此类性质的事物。

希望这个答案可以帮助那些遇到同样问题的人，因为 onmouseenter 和 onmouseleave 是开发交互式 Web ui 时的一个重要功能。