Blazor 3.1 嵌套 onmouseover 事件
Blazor 3.1 nested onmouseover events
我对嵌套的 div 都具有 onmouseover/onmouseout 事件有疑问。我有一个导航菜单,它由 onmouseover 事件触发,从屏幕的一侧弹出。在这个导航菜单中,我有一个弹出打开的子菜单,它也是由 onmouseover 事件触发的。两个打开事件独立运行良好,但是当 运行 在一起时,触发器似乎被外部 div 拦截(外部 div 打开但内部 div 什么都不做)。
- 我尝试在父项和子项上添加@onmouseover:stopPropagation="true" div,但这没有任何效果。
- 我知道有人在谈论 onmouseenter/onmouseleave 与 Blazor 5 中的 html/js 类似,但距离 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">
这是一个非常 non-obvious 且看似未记录的解决方案,我设法通过破译 half-answered Blazor 讨论将其拼凑在一起。我不是 100% 确定文件必须被调用 EventHandlers.cs,它可能不是我没有尝试过,而且我不是 100% 确定它必须被放置在你的应用程序的顶层,再次我没试过。
我很高兴终于让它工作了,不确定这种方法的稳定性,到目前为止没有遇到任何问题,但不能排除任何奇怪的情况,因为我想 Blazor 不支持是有原因的onmouseenter/onmouseleave 直接开箱?
此问题还有另一种解决方法,即在子元素的 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");
}
我对嵌套的 div 都具有 onmouseover/onmouseout 事件有疑问。我有一个导航菜单,它由 onmouseover 事件触发,从屏幕的一侧弹出。在这个导航菜单中,我有一个弹出打开的子菜单,它也是由 onmouseover 事件触发的。两个打开事件独立运行良好,但是当 运行 在一起时,触发器似乎被外部 div 拦截(外部 div 打开但内部 div 什么都不做)。
- 我尝试在父项和子项上添加@onmouseover:stopPropagation="true" div,但这没有任何效果。
- 我知道有人在谈论 onmouseenter/onmouseleave 与 Blazor 5 中的 html/js 类似,但距离 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">
这是一个非常 non-obvious 且看似未记录的解决方案,我设法通过破译 half-answered Blazor 讨论将其拼凑在一起。我不是 100% 确定文件必须被调用 EventHandlers.cs,它可能不是我没有尝试过,而且我不是 100% 确定它必须被放置在你的应用程序的顶层,再次我没试过。
我很高兴终于让它工作了,不确定这种方法的稳定性,到目前为止没有遇到任何问题,但不能排除任何奇怪的情况,因为我想 Blazor 不支持是有原因的onmouseenter/onmouseleave 直接开箱?
此问题还有另一种解决方法,即在子元素的 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");
}