苗條的 mouseout 事件在元素內部觸發

Question

我在意外觸發mousein和mouseout事件時遇到問題。

我正在嘗試使用 GitHub svg 圖標並聆聽鼠標何時進入和離開圖標。 不過，我無法在Svelte 的 REPL中復制它。 在 REPL 中， mouseout事件將觸發一次，但是將我的鼠標移過該元素會在一次傳遞中導致 4-5 次mouseout 。 當您離開父元素並進入子元素時， mouseout似乎會觸發，因此當您輸入<svg>和<path>等時，從<a>標記上的mousein將觸發mouseout 。

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

Answer 1

有四個鼠標事件與此邏輯相關：

• mouseenter
• mouseover
• mouseleave
• mouseout

（沒有mousein 。）

這些氣泡： mouseover和mouseout
這些不冒泡： mouseenter & mouseleave

冒泡事件將觸發層次結構中的所有子級。 如果您不想要這些事件，請使用非冒泡版本。 即使用mouseleave而不是mouseout 。