Skip to main content

事件类型

mouseover & mouseenter

在做input组件的时候,需要有一个鼠标悬浮后,出现一个小图标,点击小图标清除文字的事件。如下图:

20191012200452.png

此时如果使用mouseovermouseout事件控制图标显示,发现如果鼠标移到 icon 边界,就会出现 icon 闪烁。这代表着mouseout事件被触发,显示图标的变量变为false

mouseover 和 mouseenter 的区别

类似mouseover,它们两者之间的差别是 mouseenter不会冒泡,也就是说当指针从它的子层物理空间移到它的物理空间上时不会触发。两个对应的mouseoutmouseleave行为相同。

由于mouseovermouseout在空间之间切换也会触发事件,这就导致了在 icon 的边界mouseovermouseout会的频繁切换,表现出现 icon 闪烁。

演示地址

如果以上的内容,都没看明白,也没关系。点击此链接可以更直观的展示了两者的区别。

链接失效可点此处下载