[英]svelte mouseout event triggering inside element
I'm having problems with mousein
and mouseout
events triggering at unexpected times.我在意外触发
mousein
和mouseout
事件时遇到问题。
I am trying to use a GitHub svg icon and listen to when the mouse enters and leaves the icon.我正在尝试使用 GitHub svg 图标并聆听鼠标何时进入和离开图标。 I'm not able to replicate it in Svelte's REPL though.
不过,我无法在Svelte 的 REPL中复制它。 In the REPL, the
mouseout
event will trigger once however moving my mouse through the element causes 4-5 mouseout
in one pass.在 REPL 中,
mouseout
事件将触发一次,但是将我的鼠标移过该元素会在一次传递中导致 4-5 次mouseout
。 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.当您离开父元素并进入子元素时,
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>
There are four mouse events related to this logic:有四个鼠标事件与此逻辑相关:
mouseenter
mouseover
mouseleave
mouseout
(There is no mousein
.) (没有
mousein
。)
These bubble : mouseover
& mouseout
这些气泡:
mouseover
和mouseout
These do not bubble: mouseenter
& mouseleave
这些不冒泡:
mouseenter
& mouseleave
Bubbling events will trigger for all children in the hierarchy.冒泡事件将触发层次结构中的所有子级。 If you do not want those events, use the non-bubbling versions.
如果您不想要这些事件,请使用非冒泡版本。 Ie use
mouseleave
instead of mouseout
.即使用
mouseleave
而不是mouseout
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.