Blazor 3.1 嵌套的鼠标悬停事件

Posted 2023-02-15

【中文标题】Blazor 3.1 嵌套的鼠标悬停事件

【英文标题】：Blazor 3.1 nested onmouseover events

【发布时间】：2020-11-25 16:11:47

【问题描述】：

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

我尝试在父 div 和子 div 上都添加 @onmouseover:stopPropagation="true"，但这没有任何效果。 我知道在 Blazor 5 中以类似于 html/js 的方式讨论了 onmouseenter/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>

【参考方案1】：

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

在 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 直接开箱？

对于这个问题还有另一种解决方法，在子元素的 css 上设置 pointer-events:none;，但是这种方法会阻止任何交互性，例如颜色更改鼠标滚动选项和类似性质的东西。

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

【讨论】：

是的，这很疯狂，但有效。您是否有其他找到解决方案的链接？请编辑您的答案并将链接来源添加到您的答案中。

老实说@Major，这就像在黑暗中解决拼图游戏。我搜索了像这样的 GitHub 问题：github.com/dotnet/aspnetcore/issues/13104 人们在其中引用了解决方案，但实际上并没有提供任何真正的细节，因此实施起来非常困难。我从大约 4 或 5 个类似的不同来源拼凑而成，并实际查看了 GitHub 上的 Blazor 源代码。

嗯，是的，我也发现了同样的问题，但是与此同时，这个人删除了这个链接后面的代码：github.com/dotnet/aspnetcore/blob/master/src/Components/Web/src/…

@Major 这里是新链接github.com/dotnet/aspnetcore/blob/master/src/Components/Web/src/…

和你们一样的想法......为什么这两行没有直接添加到堆栈中......肯定是我们可能永远不会知道的一些开发设计或权衡！