vue 使用鼠标移入移出事件发生冒泡事件阻止冒泡不生效的解决方法
今天是非常忙碌又很坑的一天啦又踩了一个坑按需求写了一个鼠标移入出现价格 详情的盒子鼠标移出消失的方法使用mouseout和mouseover 但是这时候就发生了冒泡事件父级元素绑定定mouseout和mouseover,移过父元素和子元素是都会触发!!!!!尝试了@mouseout.stop.prevent=“addClassload(index)” 等阻止冒泡事件都不行最后查资...
今天是非常忙碌又很坑的一天啦 又踩了一个坑
按需求写了一个鼠标移入出现价格 详情的盒子 鼠标移出消失的方法
使用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
更多推荐
所有评论(0)