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事件。这一对事件更适合这里的需求。

vue中解决 mouseenter 和 mouseout 时，鼠标进入子组件造成 mouseout 触发而闪烁的问题相关推荐

vue中解决模糊搜索输入中文时--未输入完成时触发input事件
在给输入框绑定input或keydown事件时预期效果是有输入法时,输入中文后触发事件,不希望输一个字母就触发一次事件可以用到compositionstart,compositionend. 主流 ...
vue中解决时间在ios上显示NAN的问题
vue中解决时间在ios上显示NAN的问题参考文章: (1)vue中解决时间在ios上显示NAN的问题 (2)https://www.cnblogs.com/wzs5800/p/9580785.ht ...
Vue中import引入模块路径时的@符号
Vue中import引入模块路径时的@符号 1.ES6 模块主要有两个功能:export 和 import export:用户对外输出本模块(一个文件可以理解为一个模块,比如 aaa.js bbb.j ...
vue中解决three.js出现内存泄漏丢失上下文问题
vue中解决three.js出现内存泄漏丢失上下文问题参考文章: (1)vue中解决three.js出现内存泄漏丢失上下文问题 (2)https://www.cnblogs.com/lichuank ...
vue中echarts折线图双折线，鼠标悬浮时间，将两个X轴的内容以及Y轴的内容全部显示出来
vue中echarts折线图双折线,鼠标悬浮时间,将两个X轴的内容以及Y轴的内容全部显示出来: 只要修改一个地方,用formatter方法 tooltip: {trigger: 'axis',axis ...
vue中props传值给data时-props有值但data却是空的问题
问题设计vue组件时,常常有这样一个应用场景:父组件通过接口请求回来的数据传给子组件, 然后在子组件内部我们会用一个props来接收,并且将该props赋值给data里面的一个变量(便于我们后期对这 ...
vue中的方法 methods 定义时不要使用箭头函数
今天在vue中引入vuex的时候出现了错误,解决了一个多少时,总结如下: vuex 的使用: vuex就是一个状态管里中心也好比一个仓库细分可分为五个部分,这是我不考虑 module 分别是 st ...
vue 点击事件传递多个参数_Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
vue 项目，父组件中每次点击按钮重新加载子组件，（重新生成dom 元素）
vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...

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

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