Javascript的mouseover和mouseenter的区别

1.当鼠标移动到元素上时就会触发mouseenter事件

2.区别：

mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发

之所以这样，就是因为mouseenter不会冒泡

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.father{width: 400px;height: 400px;background-color: aqua;}.son{width: 200px;height: 200px;background-color: purple;}</style></head><body><div class="father"><div class="son">           </div></div></body><script type="text/javascript">var father=document.querySelector('.father');var son=document.querySelector('.son');father.addEventListener('mouseover',function(){console.log(11);})father.addEventListener('mouseenter',function(){console.log(11);})</script>
</html>

注意：mouseenter搭配鼠标离开mouseleave同样不会冒泡

Javascript的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只经过自身盒子触发,没有冒泡 ...
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:当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发, ...
JavaScript中的mouseover与mouseenter，mouseout和mouseleave的区别
1.mouseover与mouseenter mouseover事件:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. mouseenter事件:只有在鼠标指针穿过被选元素时, ...

Javascript的mouseover和mouseenter的区别

Javascript的mouseover和mouseenter的区别相关推荐

最新文章

热门文章