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，这就是不符合我们项目的地方。
网友评论