blazor - Blazor 3.1 嵌套的鼠标悬停事件
问题描述
我对嵌套的 div 有一个问题,它们都有 onmouseover/onmouseout 事件。我有一个导航菜单,它从屏幕一侧弹出,由 onmouseover 事件触发。在这个导航菜单中,我有一个弹出打开的子菜单,它也是由 onmouseover 事件触发的。两个打开事件独立工作正常,但是当一起运行时,触发器似乎被外部 div 拦截(外部 div 打开但内部 div 什么都不做)。
- 我尝试在父 div 和子 div 上添加 @onmouseover:stopPropagation="true" ,但这并没有产生任何效果。
- 我知道有关于 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">
这是一个非常不明显且看似未记录的解决方案,我设法通过破译半答案的 Blazor 讨论拼凑起来。我不是 100% 肯定该文件必须被称为 EventHandlers.cs,我可能没有尝试过,我也不是 100% 肯定它必须放在你的应用程序的顶层,我再次没有没试过。
我很高兴终于让它工作了,不确定这种方法的稳定性,到目前为止没有遇到任何问题但不能排除任何奇怪之处,因为我认为 Blazor 不直接支持 onmouseenter/onmouseleave 是有原因的盒子?
这个问题还有另一种解决方法,设置pointer-events:none;
子元素的 css,但是这种方法会阻止任何交互性,例如颜色更改鼠标滚动选项和类似性质的东西。
希望这个答案可以帮助解决与 onmouseenter 和 onmouseleave 相同的问题的人在开发交互式 Web ui 时有点重要的功能。
推荐阅读
- c++ - 如何在 C++ 的 WPF 上使用 OnMouseLeftButtonDown
- angular - Angular:未捕获的类型错误:无法读取未定义的属性“调用”
- amazon-athena - MYSQL 获取子字符串
- nsis - makensis 将 nsis 输出文件放在哪里?
- nginx - 如何使用邮件服务器 (iRedAdmin) 托管一些网站?
- javascript - 在 Backbone 中:在没有 href 的锚标记上显示光标:指针
- c# - 如何在 C#/VSTO 中使用 XlCmdType.xlCmdTableCollection 为 Excel 数据模型连接指定表
- django - Django:通过比较第二个 OneToOne 相关模型的属性来获取第一个模型的对象
- azure - Azure Terraform 自动化计划
- java - 如果 Child 类使用 Builder 模式,Parent 类是否必须使用 Builder 模式?