Blazor 3.1 nested onmouseover events

Question

I have an issue with nested divs both having onmouseover/onmouseout event. I have a nav menu which pops open from the side of the screen triggered by an onmouseover event. Inside this nav menu, I have a submenu which pops open which is also triggered by an onmouseover event. Both opening events work fine independently, but when run together, the trigger seems to get intercepted the outer div (the outer div opens but the inner div does nothing).

• I have tried adding @onmouseover:stopPropagation="true" on both the parent and the child div, but this hasn't made any effect.
• I'm aware that there is talk of onmouseenter/onmouseleave in a similar way to html/js in Blazor 5, but November is a long way off and support is still up in the air.

If there's a trick I've missed please let me know. code is below (c# code omitted - just modifies the collapseNavicationFlag and ExpandSubmenu flag strings accordingly.)

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>

NavMenuSubmenu

<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>

Answer 1

A bit late to the party but after trawling the web for a solution I finally found one.

In the top level of your Blazor app create the file EventHandlers.cs and populate it with the following code:

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

Now you should be able to declare the event callbacks on html elements like you can with @onmouseout etc.

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

This is a very non-obvious and seemingly undocumented solution that I managed to scrape together by deciphering half-answered Blazor discussions. I'm not 100% sure the file has to be called EventHandlers.cs, it may not I haven't tried, and I'm not 100% sure it has to be placed in the top level of your app, again I haven't tried.

I was just happy to finally get it working, not sure about the stability of this method, not encountered any problems so far but can't rule out any strangeness as I imagine there is a reason Blazor doesn't support onmouseenter/onmouseleave straight out the box?

There is another workaround for this problem, setting pointer-events:none; on the css of the child elements however this method prevents there being any interactivity like colour change mouse rollovers of options and things of that nature.

Hopefully this answer helps someone struggling with the same issue as onmouseenter and onmouseleave are kinda important features when developing interactive web ui's.

Answer 2

In blazor .net6 you have the following events on div:

@onmouseout="MouseOut" @onmouseover="MouseOver"


@code {
    void MouseOut() => Console.WriteLine("MouseOut");

    void MouseOver() => Console.WriteLine("MouseOver");
}