jQuery面试题-区别mouseover和mouseenter的不同之处(看了也许对你有好处)

文章目录

1.简单阐述mouseover和mouseenter的不同之处
2.代码实例测试
3.效果图

1.简单阐述mouseover和mouseenter的不同之处

mouseover:在移入子元素的时候也会触发,对应mouseout
mouseenter:移入当前元素会触发，如果有子元素，则不会触发,对应mouseleave
hover():这个方法里面实质上就是使用mouseenter()和mouseleave()

2.代码实例测试

<html><head><base href="<%=basePath%>"><title>My JSP 'practice_02.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><style type="text/css">*{margin:0;padding:0;}.div1 {position:absolute;display:flex;align-items:center;width:200px;height:200px;background-color:red;}.div2 {width:100px;height:100px;background-color:yellow;}.div3 {position:relative;display:flex;align-items:center;width:200px;height:200px;background-color:blue;left:300px;float:left;   }.div4 {width:100px;height:100px;background-color:yellow;}</style></head><body>   <div class="div1"><div class="div2">div2...</div>div1...</div><div class="div3"><div class="div4">div4...</div>div3...</div><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">/*区别mouseover和mouseenter的不同之处mouseover:在移入子元素的时候也会触发,对应mouseoutmouseenter:移入当前元素会触发，如果有子元素，则不会触发,对应mouseleavehover():这个方法里面实质上就是使用mouseenter()和mouseleave()*/$('.div1').mouseover(function() {console.log('mouseover 进入');}).mouseout(function() {console.log('mouseout 离开');});$('.div3').mouseenter(function() {console.log('mouseenter 进入');}).mouseleave(function() {console.log('mouseleave 离开');});</script></body>
</html>

3.效果图

1.div1绑定了mouseover(鼠标移入)与mouseout(鼠标移出)事件
(1)我们看一下后台有什么输出(大家把黑色的点当做鼠标的移动)

(2)第二步移动

(3)第三步移动
实验证明，当移入div1的子元素div2的时候，触发了mouseout事件，并且移入离开div2时会触发mouseover与mouseout事件

2.div3绑定了mouseenter(鼠标移入)与mouseleave(鼠标移出)事件

(1)第一步移动
(2)第二步移动

(3)第三步移动

实验证明，及时div4拥有子元素，在移入移出子元素的时候也不会触发mouseenter和mouseleave事件

jQuery面试题-区别mouseover和mouseenter的不同之处(看了也许对你有好处)相关推荐

mouseover、mouseenter
mouseover.mouseenter 相信大家刚开始学mouseover和mouseenter的时候,总感觉这两个效果是一样的! 但是仔细一想,既然是一样的,那么为什么要写两个呢? 那么问题就来了 ...
jQuery mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
jQuery中hover与mouseover和mouseout的区别分析
本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...
JS——mouseover和mouseenter的区别
区别举例补充区别 mouseover:鼠标移入事件所绑定的元素或其子元素时,都会触发该事件.(具有冒泡特性) mouseenter:只有鼠标移入事件所绑定的元素时,才会触发该事件.(不具有冒泡特 ...
Vue 实现 Hover 功能（ mouseover 与 mouseenter 的区别）
一.mouseover 和 mouseenter 的区别 mouseover:当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发,冒泡过程.对应的移除事件是 mouseout mouseente ...
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 ...
java mouseenter_关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
最近在做的在线考试和课程商城都遇到这样的问题:就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,解决这个现象的办法有许多,不过我觉 ...