我有一个问题，嵌套的div都有onmouseover/ommouseout事件。我有一个导航菜单，由onmouseover事件触发，从屏幕一侧弹出。在这个导航菜单中，我有一个子菜单弹出，它也是由onmouseover事件触发的。两个打开事件都可以独立工作，但当一起运行时，触发器似乎会被外部div拦截(外部div打开，但内部div什么也不做(。
- 我已经尝试添加@onmouseover:stopPropagation="真"；在父div和子div上，但这没有任何效果
- 我知道有人以类似于Blazor 5中的html/js的方式谈论onmousent/onmouseleave，但11月还有很长的路要走，支持仍然悬而未决
如果我错过了什么技巧，请告诉我。代码如下(省略了c#代码-只是相应地修改collapseNavicationFlag和ExpandSubmenu标志字符串。(
导航菜单
<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 {
}
现在，您应该能够像使用@onmouseout等一样，在html元素上声明事件回调
<div id="nav-bar" class="@collapseNavigationFlag" @onmouseenter="ExpandNavigation" @onmouseleave="CollapseNavigation">
这是一个非常不明显、似乎没有记录的解决方案，我通过破译Blazor的半回答讨论，勉强拼凑出了这个解决方案。我不能100%确定该文件必须被称为EventHandlers.cs，它可能不是。我没有尝试过，我也不能100%确定它必须被放在你的应用程序的顶级中，我也没有尝试过。
我很高兴终于让它工作起来了，不确定这个方法的稳定性，到目前为止没有遇到任何问题，但也不能排除任何奇怪之处，因为我想Blazor不直接支持onmouseenter/omouseleaf是有原因的吗？
这个问题还有另一种解决方法，在子元素的css上设置pointer-events:none;，但是这种方法可以防止任何交互，比如颜色变化鼠标滚动选项和类似性质的东西。
希望这个答案能帮助人们解决同样的问题，因为onmouseenter和onmouseleave是开发交互式web ui的重要功能。
在blazor.net6中，div上有以下事件：
@onmouseout="MouseOut" @onmouseover="MouseOver"
@code {
void MouseOut() => Console.WriteLine("MouseOut");
void MouseOver() => Console.WriteLine("MouseOver");
}