Vue实现Hover功能(mouseover与mouseenter的区别及说明)原文： https://www.jb51

原文： www.jb51.net/article/264…

仅供自己学习，

这篇文章主要介绍了Vue实现Hover功能(mouseover与mouseenter的区别及说明)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

Vue实现Hover功能

mouseover 和 mouseenter 的区别

mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是 mouseout
mouseenter:当鼠标移入元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡。对应的移除事件是 mouseleave
通过图片进行分析冒泡情况

hover 事件调用顺序

mouseover -> mouseenter -> mousemove(hover进去之后移动会触发) -> mouseout -> mouseleave

案例

案例效果

案例代码

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 <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、进入元素`` ``mouseover () {`` ``console.log(``'mouseover'``)`` ``},`` ``// 2、进入元素`` ``mouseenter () {`` ``console.log(``'mouseenter'``)`` ``},`` ``// 3、移动`` ``mousemove () {`` ``console.log(``'mousemove'``)`` ``},`` ``// 4、离开元素`` ``mouseout () {`` ``console.log(``'mouseout'``)`` ``},`` ``// 5、离开元素`` ``mouseleave () {`` ``console.log(``'mouseleave'``)`` ``},`` ``// 6、鼠标在元素上按下`` ``mousedown () {`` ``console.log(``'mousedown'``)`` ``},`` ``// 7、鼠标在元素上抬起`` ``mouseup () {`` ``console.log(``'mouseup'``)`` ``}`` ``}``}``</script> <style>``.hover-view {`` ``width: 100px;`` ``height: 100px;`` ``background-color: red;``}``</style>