mouseover 和 mouseenter的区别

mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout

mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave

mouseover和mouseenter的异同体现在两个方面：

1. 是否支持冒泡

2.事件的触发时机

运行下面的代码，我们可以直观的发现两者的区别：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {padding: 0;margin: 0;}.father {/* margin: 100px auto; */width: 500px;height: 500px;background-color: pink;}.son {width: 200px;height: 200px;background-color: purple;/* transform: translateX(-50px); */}</style></head><body><div class="father"><div class="son"></div></div><script>let father = document.querySelector('.father')let son = document.querySelector('.son')// 事件捕获// mouseenter——不支持事件冒泡father.addEventListener('mouseenter', function() {console.log('father-mouseenter')})son.addEventListener('mouseenter', function(e) {// e.stopPropagation()console.log('son-mouseenter')})// mouseleave——支持事件冒泡// father.addEventListener('mouseleave', function() {//   console.log('father-mouseleave')// })// son.addEventListener('mouseleave', function(e) {//   // e.stopPropagation()//   console.log('son-mouseleave')// })</script></body>
</html>

mouseenter事件的情况：
当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。而鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触发。

mouseover事件的情况：
当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。如果移到父元素里面的子元素，事件也会被触发

所以我们在使用鼠标经过事件一般会使用

mouseenter 和 mouseleave 没有冒泡效果(推荐)

而mouseover 和 mouseout 会有冒泡效果

以上希望可以对你有所帮助！！！

mouseover 和 mouseenter的区别相关推荐

Vue 实现 Hover 功能（ mouseover 与 mouseenter 的区别）
一.mouseover 和 mouseenter 的区别 mouseover:当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发,冒泡过程.对应的移除事件是 mouseout mouseente ...
JavaScript---常用的鼠标事件mouseover 和mouseenter的区别
一. mouseover 和mouseenter的区别 mouseover: 只要鼠标指针移入事件所绑定的元素或其子元素,都会触发该事件 mouseenter: 只有鼠标指针移入事件所绑定的元素时, ...
JS——mouseover和mouseenter的区别
区别举例补充区别 mouseover:鼠标移入事件所绑定的元素或其子元素时,都会触发该事件.(具有冒泡特性) mouseenter:只有鼠标移入事件所绑定的元素时,才会触发该事件.(不具有冒泡特 ...
鼠标事件（mouseover和mouseenter的区别）
mouseover和mouseenter都是鼠标移到元素身上就触发,区别是 1.mouseover经过自身盒子触发,经过子盒子也触发,拥有冒泡特性 2.mouseenter只经过自身盒子触发,没有冒泡 ...
Javascript的mouseover和mouseenter的区别
1.当鼠标移动到元素上时就会触发mouseenter事件 2.区别: mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发.mouseenter只会经过自身盒子触发之所以这样,就是因为mo ...
mouseover和mouseenter的区别
mouseenter鼠标事件当鼠标移动到元素上时就会触发 mouseenter 事件类似mouseover,它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发.m ...
mouseover、mouseenter
mouseover.mouseenter 相信大家刚开始学mouseover和mouseenter的时候,总感觉这两个效果是一样的! 但是仔细一想,既然是一样的,那么为什么要写两个呢? 那么问题就来了 ...
鼠标事件(mouseover和mouseenter)
下拉菜单案例前言一.mouseover和mouseenter的不同点 1.事件的触发时机 2.是否支持冒泡二.案例总结前言自己做下拉菜单的时候,突然发现mouseover和mouseent ...
mouseover和mouseenter、mouseout和mouseleave
详细介绍请看:mouseenter与mouseover为何这般纠缠不清? mouseover和mouseenter的区别 mouseover:当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发, ...
jQuery面试题-区别mouseover和mouseenter的不同之处(看了也许对你有好处)
文章目录 1.简单阐述mouseover和mouseenter的不同之处 2.代码实例测试 3.效果图 1.简单阐述mouseover和mouseenter的不同之处 mouseover:在移入子元素 ...

mouseover 和 mouseenter的区别

mouseover 和 mouseenter的区别相关推荐

最新文章

热门文章