Vue 实现 Hover 功能（ mouseover 与 mouseenter 的区别）

一、`mouseover` 和 `mouseenter` 的区别

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

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

二、案例

案例效果

案例代码

<template><divclass="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>

Vue 实现 Hover 功能（ mouseover 与 mouseenter 的区别）相关推荐

jQuery中hover与mouseover和mouseout的区别分析
本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...
hover和mouseover，mouseout的区别
说道hover和mouseover,mouseout的区别,不得不联系到mouseenter,mouseleave. mouseover,mouseout是指鼠标指针在穿过/离开被选元素或其子元素时触 ...
JavaScript---常用的鼠标事件mouseover 和mouseenter的区别
一. mouseover 和mouseenter的区别 mouseover: 只要鼠标指针移入事件所绑定的元素或其子元素,都会触发该事件 mouseenter: 只有鼠标指针移入事件所绑定的元素时, ...
JS——mouseover和mouseenter的区别
区别举例补充区别 mouseover:鼠标移入事件所绑定的元素或其子元素时,都会触发该事件.(具有冒泡特性) mouseenter:只有鼠标移入事件所绑定的元素时,才会触发该事件.(不具有冒泡特 ...
鼠标事件（mouseover和mouseenter的区别）
mouseover和mouseenter都是鼠标移到元素身上就触发,区别是 1.mouseover经过自身盒子触发,经过子盒子也触发,拥有冒泡特性 2.mouseenter只经过自身盒子触发,没有冒泡 ...
mouseover和mouseenter的区别
mouseenter鼠标事件当鼠标移动到元素上时就会触发 mouseenter 事件类似mouseover,它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发.m ...
Javascript的mouseover和mouseenter的区别
1.当鼠标移动到元素上时就会触发mouseenter事件 2.区别: mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发.mouseenter只会经过自身盒子触发之所以这样,就是因为mo ...
mouseover、mouseenter
mouseover.mouseenter 相信大家刚开始学mouseover和mouseenter的时候,总感觉这两个效果是一样的! 但是仔细一想,既然是一样的,那么为什么要写两个呢? 那么问题就来了 ...
鼠标事件(mouseover和mouseenter)
下拉菜单案例前言一.mouseover和mouseenter的不同点 1.事件的触发时机 2.是否支持冒泡二.案例总结前言自己做下拉菜单的时候,突然发现mouseover和mouseent ...

Vue 实现 Hover 功能（ mouseover 与 mouseenter 的区别）

一、`mouseover` 和 `mouseenter` 的区别

二、案例

Vue 实现 Hover 功能（ mouseover 与 mouseenter 的区别）相关推荐

最新文章

热门文章

Vue 实现 Hover 功能（ mouseover 与 mouseenter 的区别）

一、mouseover 和 mouseenter 的区别

二、案例

Vue 实现 Hover 功能（ mouseover 与 mouseenter 的区别）相关推荐

最新文章

热门文章

一、`mouseover` 和 `mouseenter` 的区别