事件mouseover/out和mouseenter/leave

最新推荐文章于 2023-04-05 10:22:01 发布

转载最新推荐文章于 2023-04-05 10:22:01 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cherrychen/p/3861394.html

本文详细解析了mouseenter和mouseover事件的区别，包括两者的行为、触发条件和是否冒泡等特性，帮助开发者更好地理解并应用这些事件。

不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件。对应mouseout

只有在鼠标指针穿过被选元素时，才会触发mouseenter事件。对应mouseleave

对于mouseover和mouseenter两个事件，最大的区别就是mouseenter是不冒泡的事件。对于mouseover事件来说当鼠标从其他元素移动到child节点时发生但此事件会冒泡所以会导致parent也触发mouseover。如果我们对parent注册了mouseover监听，从parent移动到child同样触发parent的mouseover。如果注册的监听是mouseenter的话，无论鼠标从任何元素移动到child时，只有child元素发生mouseenter事件，而他的祖宗节点都不会因为冒泡而触发此事件。对于mouseout和mouseleave也是如此，当鼠标从child移出时，mouseout同样会冒泡到parent，从而触发parent的mouseout，而mouseleave同样无此问题。

转载于:https://www.cnblogs.com/cherrychen/p/3861394.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30627381

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

mouseover以及mouseout事件问题解决方案

玉超

02-27

6933

mouseover事件：鼠标进入元素或者在元素内部游走时候触发该事件； mouseout事件：鼠标离开该元素触发事件；现在我们有一个div，div中包含一个span，需求需要在鼠标在div内部时候监听鼠标位置；即mouseover事件，真正测试时候发现鼠标在进入span时候会触发mouseout事件然后再触发mouseover事件，一般情况下我们不会认为鼠标进入div内部的span就是离

JavaScript事件监听之事件流(捕获阶段实现 + 阻止事件流传播 + 阻止元素默认行为、mouse鼠标事件、事件委托)

Bulut0907

05-27

1216

如果addEventListener的第三个参数都是false(默认)，则点击紫色的小盒子，先弹出我是儿子，再弹出我是爸爸，最后弹出我是爷爷。可以选择不在冒泡阶段触发事件，而在捕获阶段触发事件。，是否在捕获阶段触发事件默认为false。点击紫色的小盒子，先弹出我是爷爷，再弹出我是爸爸，最后弹出我是儿子。所以将所有的事件监听，都委托给元素的父亲进行监听，就是事件委托。ul绑定点击事件，当点击其中一个li的时候，默认会。获取到点击的这个li，对这个li的样式进行改变。触发ul的点击事件。来阻止元素的默认行为。

参与评论您还未登录，请先登录后发表或查看评论

jQuery常用事件#mouseover与mouseout应用案例

林大侠

08-12

1793

mouseover([[data],fn]) 在每一个匹配元素的mouseover事件中绑定一个处理函数。 mouseover事件会在鼠标移入对象时触发 mouseout([[data],fn]) 在每一个匹配元素的mouseout事件中绑定一个处理函数。 mouseout事件在鼠标从元素上离开后会触发场景应用：新建一个“导航栏“，鼠标移入“导航栏”，背景色改变，鼠标移...

mouseover/out和mouseenter/leave的区别及用法

web开发

07-02

349

今天在做下拉菜单练习时发现一些奇怪的问题，就是当用mouseover和mouseout时，当鼠标移动到下拉菜单时容易出现闪动，最后经过查资料发现 mouseover：无论鼠标指针穿过被选元素还是任何的子元素，都会触发mouseover事件，而mouseenter只有在鼠标指针穿过被选元素时，才会触发mouseenter事件； mouseout ：无论鼠标指针离开被选元素还是任何子...

鼠标事件(mouseover和mouseenter)

qq_62042780的博客

05-27

4668

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档下拉菜单案例前言一、mouseover和mouseenter的不同点1.事件的触发时机2.是否支持冒泡二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：自己做下拉菜单的时候，突然发现mouseover和mouseenter事件都可以，但是一查之后发现他们两个还是有区别的。所以写了这篇文章记录一下，希望对大家有帮助。 mouseover和mouseenter都是鼠标移到元素身上就触发，区别是： 1.m.

mouseenter和mouseover的区别（冒泡）

bjl008的博客

05-15

661

mouseenter、mouseover我们都知道在鼠标移入当前元素时就会触发这两个事件，但如果在绑定这两个事件的元素上存在子元素，从元素外部移入元素内部时，mouseover事件会被多次触发，而mouseenter必须在离开绑定元素在进入时才会再次触发 mouseenter： <div id="box1" style="height: 200px;width: 200px; border: 1px silver solid;margin: auto;position: relative">

mousemove: mouseout mouseenter mouseleave都是什么意思

最新发布

04-02

根据用户提供的引用资料，特别是引用[3]和引用[5]，mouseenter和mouseleave是没有事件冒泡的，而mouseover和mouseout有事件冒泡。那mousemove呢，引用[3]提到它也有冒泡，并且触发顺序可能在mouseenter之后多次触发...

前端常见事件触发总结

qq_40922656的博客

06-19

1011

常见鼠标事件双击： @dblclick=“方法名” ；点击（单击）：@click=“方法名” ；鼠标按下： @mousedown=“方法名” ；鼠标抬起： @mouseup=“方法名” ；鼠标移动： @mousemove=“方法名” ；鼠标离开： @mouseleave=“方法名” ；鼠标离开： @mouseout=“方法名” ；注意⚠️ *mouseleave和mouseout的区别在于mouseout有冒泡行为。鼠标进入： @mouseenter=“方法名” ；鼠标进入：

深入理解JQuery中的事件与动画

01-21

首先，使用JQuery事件与动画的效果比使用原生js来的方便得多，当然，最重要的是考虑到了...hover(enter-func,leave-func)相当于bind(“mouseover”)和bind(“mouseleave”). toggle()模拟鼠标连点情况下的显示与隐藏事

JavaScript浏览器操作与UI事件详解：DOM、事件与交互

- 鼠标事件（mouseover/out、mouseenter/leave）、拖放事件和指针事件，以及键盘事件（keydown和keyup）的处理也在此部分深入讲解。 4. **表单与用户交互**： - 表单控件的属性和方法被介绍，如表单焦点切换...

mouseover（会冒泡）和mouseenter（不冒泡）的区别

qq_51387458的博客

04-05

329

mouseover（会冒泡）和mouseenter（不冒泡）的区别

mouseout、mouseover和mouseleave、mouseenter的区别

王者生辉的博客

08-18

1426

mouseenter：当鼠标移入某元素时触发。 mouseleave：当鼠标移出某元素时触发。 mouseover：当鼠标移入某元素时触发，移入和移出其子元素时也会触发。 mouseout：当鼠标移出某元素时触发，移入和移出其子元素时也会触发。 mousemove：鼠标在某元素上移动时触发，即使在其子元素上也会触发。 mouseout、mouseover和mouseleave、mouseenter最大的区别，在于子元素连带触发代码： <!DOCTYPE html> <

JS---- mouseenter和mouseover的区别以及动画函数的封装

bjsyc123456的博客

11-11

1242

mouseenter 和mouseover的区别当鼠标移动到元素上时就会触发mouseenter 事件类似 mouseover，它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发之所以这样，就是因为mouseenter不会冒泡跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡 Mouseover mouseout 和mouseenter mouseleave 代码示例： mouseover: f

mouseleave与mouseout的区别

weixin_30650859的博客

09-03

523

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。转载于:https://www.cnblogs.com/luhangnote/archive/2012/09/03/2669072.html...

为什么鼠标还没完全移出就触发元素的mouseout事件

dahai_PHP的博客

03-22

2531

想知道这个原因，只需要清楚的明白一下几个Jquery事件：例 ; 1.mouseover() : 如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。注：例子中div使用了mouseover 事件,鼠标在进入div到span再出去,会触发3次mouseover 事件; 2.mouseenter() : 只有在鼠标指针穿过被选元素时，才会触发 mouseente

javascript中mouseover和mouseout事件详解

后乐的博客

05-23

1万+

原文链接：http://blog.sina.com.cn/s/blog_468530a60101awlw.html JavaScript中mouseover和mouseout实事件分析

mouseenter、mouseleave、mouseover和mouseout的区别