vue 项目 如何避免子元素触发父元素的mouseout事件

使用yarn安装时,有时候会出现版本问题;造成mouseover mouseout 全部分类菜单放上后子元素会触发mouseout ;最终查到原因是因为浏览器兼容性问题;

项目中给父元素加了mouseover、mouseout事件,但是,鼠标移动到子元素上总会自动触发mouseout事件,使用prevent、stop或者self修饰符都没什么用。

vue 项目 如何避免子元素触发父元素的mouseout事件_第1张图片

 

vue 项目 如何避免子元素触发父元素的mouseout事件_第2张图片

 

如果用mouseover mouseout 无法完成鼠标放到全部分类,然后下移选择菜单; 所以查到要用mouseenter,mouseleave 来完成这个效果; 可能跟冒泡事件有关,也可能跟高度溢出有关;

反正做个比较,后期方便填坑!

参考:

https://forum.vuejs.org/t/mouseout/20419

vue 项目 如何避免子元素触发父元素的mouseout事件_第3张图片

你可能感兴趣的:(web前端架构师)