svelte mouseout event triggering inside element

January 23, 2023

I’m having problems with mousein and mouseout events triggering at unexpected times.

I am trying to use a GitHub svg icon and listen to when the mouse enters and leaves the icon. I’m not able to replicate it in Svelte’s REPL though. In the REPL, the mouseout event will trigger once however moving my mouse through the element causes 4-5 mouseout in one pass. The mouseout is seemingly triggering when you leave the parent element and enter a child element so going from mousein on the <a> tag will trigger a mouseout when you enter the <svg> and <path> etc.

<a
    href="https://github.com/blahblahblah"
    target="_blank"
    rel="noreferrer"
    class="flex"
    on:mouseenter={handleGithub}
    on:mouseout={handleGithub}
    on:blur={handleGithub}
>
    <Icon type="github" />
    {#if githubHover}
        <p>GitHub</p>
    {/if}
</a>

>Solution :

There are four mouse events related to this logic:

mouseenter
mouseover
mouseleave
mouseout

(There is no mousein.)

These bubble: mouseover & mouseout
These do not bubble: mouseenter & mouseleave

Bubbling events will trigger for all children in the hierarchy. If you do not want those events, use the non-bubbling versions. I.e. use mouseleave instead of mouseout.