jQuery种onmouseenter与onmouseover的区别在哪里？

最新推荐文章于 2024-04-07 10:29:49 发布
最新推荐文章于 2024-04-07 10:29:49 发布
阅读量1.6k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： jQuery mouseover mouseenter web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq1981684148/article/details/89483430
本文探讨了onmouseenter与onmouseover事件的区别，特别是在事件冒泡方面的不同表现。通过实例展示了两者在HTML页面上的具体应用，如菜单效果中，onmouseenter避免了事件冒泡，而onmouseover则会触发。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

onmouseenter与onmouseover事件作用：

当鼠标进入(经过)触发事件。

但他们之间有一点小的差别。我们来看这个例子。

我们创建这样的HTML页面结构

然后，给定适当的css样式如下：

这样就达到了平常网站菜单的效果

分别给ul和li添加mouseover事件。

我们给ul与li都加上mouseover事件，那么当鼠标经过li时，会有事件冒泡，会触发ul上面的mouseover事件。一次弹出两个alert窗口。

使用mouseenter事件则不会出现事件冒泡

应用于下拉菜单特效等

Axure RP Pro - 相关问题 - 与IFrame部件中的页面互操作
yffkjhg的博客
11-10 779
Axure RP Pro - 相关问题 - 与IFrame部件中的页面互操作
jQuery中mouseover事件用法实例
01-21
本文实例讲述了jQuery中mouseover事件用法。分享给大家供大家参考。具体分析如下： 当鼠标指针位于匹配的元素上方或者调用mouseover()方法时触发mouseover事件。 一个完整的事件过程，不但要有能够触发事件的条件，而且还要有事件处理程序。 可以通过mouseover()方法为mouseover事件绑定事件处理程序。例如： 代码如下:$(“div”).mouseover(function(){$(“div”).text(“软件开发网欢迎您！”)}) 以上代码就是将function函数作为事件处理程序通过mouseover()方法绑定到mouseover事件。 当触发mou
onmouseenter和onmouseover的区别
weixin_44705310的博客
09-06 254
问题出现-项目需求： 最近在做的项目，需要一个上传图片的功能，需要在上传成功后，鼠标悬浮到图片上显示重新上传按钮，使用了onmouseover和onmouseout来控制按钮的显示和隐藏，发现当用onmouseover和onmouseout事件时，鼠标在图片上移动时按钮会发生闪烁。 解决方法： 使用onmouseenter和onmouseleave即可解决闪烁问题 问题根本-onmouseenter和onmouseover本质区别： onmouseenter和onmouseleave不支持事件冒泡
onmouseover与onmouseenter区别
anjiao1697的博客
02-16 286
1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有） ，支持冒泡 2、onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有） ，不支持冒泡 转载于:https://www.cnblogs.com/bug-jin/p/103...
onmouseenter与onmouseover的区别,更多运用mouseenter
chunmeizhang_88的博客
09-23 292
为了避免事件 冒泡,实际运用,一般用onmouseenter,去实现业务,onmouseover运用少
onmouseenter 和 onmouseover 的不同
Z_唐的博客
01-10 441
该实例演示了 onmousemove, onmouseenter 和 onmouseover 的不同。 onmousemove 事件在鼠标移动到 div 元素上时触发。 mouseenter 事件在鼠标指针进入 div 元素时触发，唯一的区别是 onmouseenter 事件不支持冒泡。 onmouseover 事件在鼠标指针进入 div 元素时触发 ,在子元素上也会触发(p 和 span)
javascript中onmouse事件在div中失效问题的解决方法
01-19
在IE下解决问题很简单，用onMouseEnter、onMouseLeave来代替onMouseOver、onMouseOut就行了，他们的作用基本相同，但前者不会发生冒泡（如果用 jQuery的event事件，只要绑定mouseleave、mouseenter即可）。...
实现立体效果的jQuery折叠导航菜单特效
- **onmouseenter** 和 **onmouseleave**：与onmouseover和onmouseout不同，这两个事件不会因为鼠标移动到子元素而重复触发，更适合处理复杂交互。 ### 创建折叠式导航菜单的方法 折叠式导航菜单是一种常见于网站...
Axure RP Pro - jQuery - 如何设置焦点
yffkjhg的博客
11-09 142
Axure RP Pro - jQuery - 如何设置焦点
Axure RP Pro - jQuery - 如何实现淡入淡出效果
gdfjhc的博客
02-24 334
Axure RP Pro - jQuery - 如何实现淡入淡出效果
jquery 添加onmouseover 事件
热门推荐
pclook的专栏
11-09 1万+
<br />$(document).ready(function() { $(“#testtab”).hover( function () { //mouseover }, function () {//mouseout } ); }); //或者 $(document).ready(function() { $(“#testtab”).mouseover( function () { //mouseover }); $(“#test
jquery 手型 鼠标穿过时_jQuery事件 鼠标移动效果 onmouseover方法与onmouseout方法
weixin_39875192的博客
12-19 198
function deform(obj){var id = obj.idvar text = $("#"+id).text().trim();if(text=='设为默认'){//获取数据idvar addressId = id.replace(/[^0-9]/ig,"");$.post('/UserCenter/setAddress',{id:addressId},function(data,t...
JQuery事件（ mouseover() 方法 mouseout() 方法 ）
霖霂晗的专栏
09-23 829
当鼠标指针位于元素上方时时，改变元素的背景色： $("p").mouseover(function(){  $("p").css("background-color","yellow"); });     当鼠标从元素上移开时，改变元素的背景色： $("p").mouseout(function(){   $("p").css("background-color","#E9E9E4
JQuery中mouseover和mouseenter的区别
LongYummy的博客
05-23 612
       在对于刚开始学习JQ的初学者来说，mouseover事件和mouseenter事件总是傻傻分不清楚，毕竟刚开始学习的时候，需求没那么详细，毕竟俩事件的大致意思都一样---就是鼠标移上去，就执行该事件的自定义函数。其实我们自己去看下他们的概念，我想你应该可以从中发现区别于不同：　　mouseover：当鼠标指针位于元素上方时，会发生 mouseover 事件。       mousee...
JQuery 之事件中的 ----- hover 与 onmouseover 、onmouseout 联系
weixin_30533797的博客
04-13 256
hover([over,]out) 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。 当鼠标移出这个元素时，会触发指定的第二个函数。 注意：会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“...
mouseover VS onmouseover jquery
kungfu_panda的专栏
08-07 1533
区别
JQuery基础修炼-事件篇
weixin_34014555的博客
05-26 223
目录 第1章 事件介绍 第2章 鼠标事件 第3章 表单事件 第4章 键盘事件 第5章 事件的绑定和解绑 第6章 事件对象的使用 第7章 自定义事件 click与dbclick事件 用交互操作中，最简单直接就是点击操作。jQuery提供了两个方法一个是click方法用于监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作。这...
jQuery事件
最新发布
2401_84091663的博客
04-07 1229
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以领取。
onmouseover和onmouseenter
03-16
onmouseover和onmouseenter都是JavaScript中的事件处理函数，用于在鼠标移动到指定元素上时触发相应的操作。 onmouseover事件在鼠标移动到元素上时触发，包括鼠标从元素内部移动到外部的情况。常用于实现鼠标悬停...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值