父组件加mouseout，mouseover监听，鼠标经过子元素触发事件的问题

http://www.mamicode.com/info-detail-928135.html

今天遇到这个样一个问题，右侧的这个列表想鼠标划出的时候设为不可见。于是给列表加了监听，mouseout

但是，鼠标滑到上面具体某一项的时候也会触发监听的方法。原因是，由父元素划入子元素也触发了mouseover事件。本来想通过事件冒泡的方式来解决，但是并不能满足完全要求。解决办法如下：

1.把mouseout改为mouseleave，mouseover改为mouseenter【最佳】

先看一下区别：

mouseover与mouseenter：

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

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

mouseout与mouseleave：

不论鼠标指针离开被选元素或其子元素，都会触发mouseout；

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

真的是很神奇，姿势点get了吧？试了试果然好使！

2.不是办法的办法（实现了最终的效果，有点歪）

思路就是先打印一下这个event，看有啥可用的属性没。

然后操作看打印，找规律：

然后写判断条件。

这个办法比较繁琐，需要多次操作找规律，看打印结果，虽然功能实现了，但不提倡。

3.事件冒泡的解决办法（没实现最后我们想要的，差一步）

利用e.stopPropagation()阻止事件近一步传播。

调用该方法后，事件停止冒泡，可以阻止把事件分派到其他节点。

给每个子元素加mouseout的监听，在处理方法中，调用e.stopPropagation()；父元素的mouseout正常。

结果就是从子元素上移出时，mouseout事件不会冒泡，不会在父元素上被捕获。

但是从父元素移到子元素上时，会触发父元素的mouseout，这就是不符合我们项目的地方。