vue 使用鼠标移入移出事件发生冒泡事件阻止冒泡不生效的解决方法

今天是非常忙碌又很坑的一天啦 又踩了一个坑
按需求写了一个鼠标移入出现价格 详情的盒子 鼠标移出消失的方法
使用mouseout和mouseover 但是这时候就发生了冒泡事件
父级元素绑定定mouseout和mouseover，移过父元素和子元素是都会触发！！！！！
尝试了@mouseout.stop.prevent=“addClassload(index)” 等阻止冒泡事件都不行
最后查资料看到了大神的科普才解决
解决办法很简单就是 把mouseout和mouseover 更换成mouseenter和mouseleave
此处非常想发一个捂脸哭的表情包 如果有人对大神的博客感兴趣 链接放在最后

原理写在这里：

1. mouseover与mouseout

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

2. mouseleave 与 mouseenter

只有在鼠标指针从元素外穿入被选元素（到元素内）时，才会触发 mouseenter 事件。

只有在鼠标指针从元素内穿出被选元素（到元素外）时，才会触发 mouseleave 事件。

总结一下就是 一般情况下都不推荐使用mouseover与mouseout 最好使用mouseleave 与 mouseenter
真的是被坑惨了啊

大神链接，大神的文章的超级有用 特别适合我这种小白！

https://blog.csdn.net/weixin_34281537/article/details/92386783