vue-鼠标事件

鼠标事件

1.mouseover：当鼠标指针进入一个元素时触发。
2.mouseout：当鼠标指针离开一个元素时触发。
3.mouseenter：当鼠标指针进入一个元素时触发，但不会冒泡到父元素。
4.mousemove：当鼠标指针在一个元素内移动时触发，即使没有按下鼠标键。
5.mouseleave：当鼠标指针离开一个元素时触发，但不会冒泡到父元素。

div 应该用v-show

vue中解决 mouseenter 和 mouseout 时，鼠标进入子组件造成 mouseout 触发而闪烁的问题

（1）mouseover 和 mouseout
是根据鼠标事件的target进行触发的，是一种精确触发。当为某一组件(如div)设置这两个事件时，当事件的target是该组件时，就会触发mouseover，但是当鼠标划到该组件的子组件上时，因为target改变了，所以就触发了 mouseout 事件，这往往就会造成页面元素的闪烁。
而实际开发过程中，更多的是针对范围的操作。如果鼠标在某个组件(如div)范围内就触发进入组件的操作，如果离开这个组件的页面范围，就触发离开的事件。这就用到了下面的一对事件。

（2）mouseenter 和 mouseleave
mouseenter 和 mouseleave是根据组件在页面的范围(坐标)进行触发的。不管组件中是否有子组件，只要鼠标进入到组件的范围内，就可以触发mouseenter事件，离开范围，则触发mouseleave事件。这一对事件更适合这里的需求。