解决 mouseenter 和 mouseout 时,鼠标进入子组件造成 mouseout 触发而闪烁的问题

1.需求背景

项目中,要对系统功能进行分类索引,所以简单设计了下,用了下面的处理方式。
div原样:
在这里插入图片描述
鼠标放到div块上时:
在这里插入图片描述
鼠标离开时,恢复原样:
在这里插入图片描述
需要做一个图标式的便签,当鼠标移动到div上时,div变大,并且显示具体条目,当鼠标离开时,恢复div的原样。本来是一个很简单的特效,网上例子也有很多,但是在将样式嵌入到代码中时,竟然出现了闪烁的问题。
开始时,使用的是 mouseenter 和 mouseout 事件。之前也发生过这样的现象,当时是使用 为 document 添加 mouseover 事件,然后根据组件在页面的范围进行判断,动态加载样式实现的。当时是使用的jquery,一切还好说,当前这个项目使用的是vue,如果还是那样做的话,岂不是打乱了vue的步伐。所以,就研究了下。


2.核心解决方法

使用 mouseenter 和 mouseleave 事件。
这两个事件是根据组件在页面上的范围进行计算的,只要在某个组件上添加了这两个事件,会计算鼠标的位置,只要在组件范围内,就可以触发。


3.两对鼠标事件的区别

(1)mouseover 和 mouseout

是根据鼠标事件的target进行触发的,是一种精确触发。当为某一组件(如div)设置这两个事件时,当事件的target是该组件时,就会触发mouseover,但是当鼠标划到该组件的子组件上时,因为target改变了,所以就触发了 mouseout 事件,这往往就会造成页面元素的闪烁。
而实际开发过程中,更多的是针对范围的操作。如果鼠标在某个组件(如div)范围内就触发进入组件的操作,如果离开这个组件的页面范围,就触发离开的事件。这就用到了下面的一对事件。

(2)mouseenter 和 mouseleave

mouseenter 和 mouseleave是根据组件在页面的范围(坐标)进行触发的。不管组件中是否有子组件,只要鼠标进入到组件的范围内,就可以触发mouseenter事件,离开范围,则触发mouseleave事件。这一对事件更适合这里的需求。

Logo

前往低代码交流专区

更多推荐