Prevent onmouseout from firing in Blazor when moving over a child element

Question

I have a question similar to this one but involving Blazor. I have a div that works like a popup menu which which contains child elements that the user can click on to do something. I would like the popup div to disappear when the user moves the mouse off of it. I can use the onmouseout event, but the problem is that moving the mouse over the child elements within the popup div triggers that event. I want onmouseout to fire only when the mouse moves out of the parent div. The only solution I found so far that kind of works is to use CSS to set "pointer-events: none;" on the child elements. But that also disables the click event on them, which I want to maintain. Blazor does not support onmouseleave which is recommended elsewhere.

So how can I use the onmouseout event in Blazor on a div which is not triggered by its child elements?

UPDATE:

Cory's answer to use @onmouseout:preventDefault on the child elements did work. But the mouseout event did not fire reliably. I successfully found a work around by setting classes on the div container when showing the popup and used CSS onhover to hide and show it like this

The popup div is opened by setting a bool value to true in the Razor page. Using JavaScript to hide it seems quite ooky. — Rono, Mar 18 '21 at 19:39
Hey @Rono if you can add some code on how you actually did it, that would be great. Thanks ! — Kumar, Apr 29 '22 at 07:38

score 1 · Accepted Answer · answered Mar 18 '21 at 20:50

This may not be right but couldn't you use @onmouseout:preventDefault or @onmouseout:stopPropagation on the child HTML elements?

I haven't tested of course, but these exist for all Blazor events: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-5.0#prevent-default-actions

score 0 · Answer 2 · answered Aug 22 '23 at 13:00

Slight deviation but this solved the issue for me:

Instead of:

onmouseover
onmouseout

I used:

onmouseenter
onmouseleave

In my case this applied to the use case where I wanted to show / hide an overlay for a card.

<div class="template" onmouseenter="@this.MouseOver" onmouseleave="@this.MouseOut">

Prevent onmouseout from firing in Blazor when moving over a child element

2 Answers2