A,mouseover 和 mouseenterThe difference between

  • Mouseover: Events are triggered when the mouse moves over an element or its child, so there is a repeated triggering, bubbling process. The corresponding remove event is mouseout

  • Mouseenter: An event is triggered when the mouse moves over the element itself (a child element that does not contain the element), that is, it does not bubble. The corresponding remove event is mouseleave

  • Analyze bubbling through pictures

  • Hover event call order

    Mouseover -> mouseEnter -> Mousemove -> Mouseout -> mouseleave

Second, the case

  • Effect of case

  • Case code

    <template> <div class="hover-view" @mouseover="mouseover" @mouseenter="mouseenter" @mousemove="mousemove" @mouseout="mouseout" @mouseleave="mouseleave" @mousedown="mousedown" @mouseup="mouseup" > </div> </template> <script> export default { methods: {// 1, enter mouseover () {console.log('mouseover')}, // 2, enter mouseEnter () {console.log('mouseenter')}, // mousemove () {console.log('mousemove')}, // mouseout () {console.log('mouseout')}, Mouseleave () {console.log('mouseleave')}, mousedown () {console.log('mousedown')}, </script> <style>. Hover -view {width: 100px; height: 100px; background-color: red; } </style>Copy the code