简单了解mouseover与mouseenter的使用场景

我们知道鼠标经过和离开的事件有俩种：

mouseenter与mouseover，那么这里俩个事件有什么区别呢？

mouseenter：给谁注册的事件，就必须经过谁，才能触发该事件

简单来说mouseenter不能冒泡，也就是说经过其子盒子，不会触发它的事件

而mouseover刚好相反，因为mouseover会冒泡。所以当你经过它的子盒子它也会触发相应事件：

<style>*{margin: 0;padding: 0;}div{position: relative;margin-top: 50px;margin-left: 50px;width: 300px;height: 300px;background-color: aquamarine;}a{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);display: block;width: 100px;height: 100px;border: 5px solid #000;padding: 5px;background-color: brown;}em{position: absolute;top: 5000px;}
</style>
<body><div><a href="javascript:;">son</a>father</div>
</body>
<script>
const div = document.querySelector('div')
const a = document.querySelector('a')
div.addEventListener('mouseover',function(){console.log('触发了div');this.style.backgroundColor = 'blue'
})
</script>

当鼠标经过son时，必然会先经过father，经过father触发了一次，经过son因为冒泡原理又触发了一次father：

如果我们使用mouseenter呢？
const div = document.querySelector('div')
const a = document.querySelector('a')
div.addEventListener('mouseenter',function(){console.log('触发了div');this.style.backgroundColor = 'blue'
})
当鼠标经过son时，必然会先经过father，经过father触发了一次，经过son之后，因为mouseenter不能冒泡，所以没有触发father：

我们可以根据实际情况来判断到底使用哪种鼠标经过事件

mouseenter --> 鼠标经过（不冒泡）	mouseleave -->鼠标离开（不冒泡）
mouseover -->鼠标经过（冒泡）	mouseout -->鼠标离开（冒泡）

简单了解mouseover与mouseenter的使用场景相关推荐

jQuery面试题-区别mouseover和mouseenter的不同之处(看了也许对你有好处)
文章目录 1.简单阐述mouseover和mouseenter的不同之处 2.代码实例测试 3.效果图 1.简单阐述mouseover和mouseenter的不同之处 mouseover:在移入子元素 ...
java mouseenter_关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
最近在做的在线考试和课程商城都遇到这样的问题:就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,解决这个现象的办法有许多,不过我觉 ...
JavaScript中的mouseover与mouseenter，mouseout和mouseleave的区别
1.mouseover与mouseenter mouseover事件:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. mouseenter事件:只有在鼠标指针穿过被选元素时, ...
鼠标事件(mouseover和mouseenter)
下拉菜单案例前言一.mouseover和mouseenter的不同点 1.事件的触发时机 2.是否支持冒泡二.案例总结前言自己做下拉菜单的时候,突然发现mouseover和mouseent ...
mouseover和mouseenter的异同
引言在自己动手练习一些项目实例的时候,发现mouseover和mouseenter这俩事件功能有点相似,但应用场景却不同. 所以想整篇博客梳理梳理 mouseover和mouseenter的不同点: ...
JavaScript---常用的鼠标事件mouseover 和mouseenter的区别
一. mouseover 和mouseenter的区别 mouseover: 只要鼠标指针移入事件所绑定的元素或其子元素,都会触发该事件 mouseenter: 只有鼠标指针移入事件所绑定的元素时, ...
mouseover与mouseenter，mouseout和mouseleave的区别
mouseover与mouseenter,mouseout和mouseleave的区别 Introdece 想起来这个就来气.举个例子,做轮播图的时候,当鼠标移动到前后的按钮的时候要清除掉定时器.我的 ...
mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
Unity3d 简单的小球沿贝塞尔曲线运动(适合场景漫游使用)
简单的小球沿贝塞尔曲线运动,适合场景漫游使用贝塞尔曲线:(贝塞尔曲线的基本想法部分摘自http://blog.csdn.net/u010019717/article/details/4768 ...
mouseover、mouseenter
mouseover.mouseenter 相信大家刚开始学mouseover和mouseenter的时候,总感觉这两个效果是一样的! 但是仔细一想,既然是一样的,那么为什么要写两个呢? 那么问题就来了 ...

简单了解mouseover与mouseenter的使用场景

简单了解mouseover与mouseenter的使用场景相关推荐

最新文章

热门文章