关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

最新推荐文章于 2024-03-16 11:36:04 发布
转载 最新推荐文章于 2024-03-16 11:36:04 发布 · 967 阅读 · 0
文章标签：

#鼠标 #mouseover #mouseout

本文详细解析了mouseover、mouseout、mouseenter及mouseleave等鼠标事件的区别与应用场景，特别指出这些事件在元素及其子元素上的触发行为差异，并提供了如何避免低版本浏览器中可能出现的闪动问题的方法。

鼠标滑过的时候出现一个层，当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象，解决这个现象的办法有许多，不过我觉得有一种是最简单的那就是把mouseover和mouseout换成对应的mouseenter和mouseleave。


当鼠标指针位于元素上方时，会发生 mouseover 事件。


该事件大多数时候会与 mouseout 事件一起使用。
注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。请看下面例子的演示。


当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
注意：mouseover ,mouseout当鼠标指针穿过被选元素子元素时，也会触发事件。这在绑定事件时，有时出现意想不到的Bug可能就是由 mouseover mouseout 事件引起的

mouseover与mouseenter


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

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


mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。


参考效果 ：http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseleave_mouseout

JavaScript中的事件mouseover、mouseout、mouseenter和mouseleave有着不同的行为和触发条件
CsCufft的博客
09-28 1019
换句话说，只有当鼠标指针直接进入元素时才会触发mouseenter事件，不会触发其子元素的mouseenter事件。换句话说，只有当鼠标指针直接离开元素时才会触发mouseleave事件，不会触发其子元素的mouseleave事件。需要注意的是，mouseover和mouseout事件在鼠标指针进入或离开元素的任何子元素时都会触发，而mouseenter和mouseleave事件只在鼠标指针直接进入或离开元素时触发。当鼠标指针进入元素时，元素的背景颜色将变为红色，并在控制台打印"mouseover"消息。
mouseover mouseout和mouseenter mouseleave的区别
huahuahua__的博客
08-14 1万+
mouseover mouseout：在鼠标进入或者离开作用元素或者其子元素时，都会触发 在进入son的时候，因为离开了father，所以会触发一次mouseout，同理，在再次进入father的时候，也因为离开了son，所以先触发了一次mouseout再触发mouseover。在进入子元素也会触发mouseover是因为子元素的mouseover事件冒泡到父元素中，被父元素监听到，进而触发...
详解Vue3中的鼠标事件mousemove、mouseover和mouseout
一起学习
01-01 2万+
本文主要介绍Vue3中的常见鼠标事件mousemove、mouseover和mouseout。
mouseover与mouseenter，mouseout和mouseleave的区别
jontyy的博客
12-22 1718
mouseover与mouseenter，mouseout和mouseleave的区别 Introdece 想起来这个就来气。举个例子，做轮播图的时候，当鼠标移动到前后的按钮的时候要清除掉定时器。我的dom结构是这样的。 于是乎，我就在container上绑定了函数，当移动到上面时，清除定时器函数，移开时增加。 我还在dot-container上也绑定了同样的函数，下面我来阐述下，我一脸...
关于mouseover ,mouseout ,mouseenter,mouseleave事件的区别
u014582551的博客
10-11 171
当鼠标指针位于元素上方时，会发生 mouseover 事件。该事件大多数时候会与 mouseout 事件一起使用。注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouse...
JS中mouseover和mouseout多次触发问题如何解决
10-22
3. mouseenter和mouseleave事件：与mouseover和mouseout不同，mouseenter和mouseleave事件不会在事件冒泡阶段触发。这意味着，只有当鼠标指针实际进入或离开被选元素本身时，这些事件才会被触发，从而避免了因子元素...
经过绑定元素时会多次触发mouseover和mouseout事件
09-04
总结来说，当面临因嵌套元素导致的 `mouseover` 和 `mouseout` 事件频繁触发的问题时，可以考虑使用jQuery的 `mouseenter` 和 `mouseleave` 或 `hover()` 方法来优化代码，提高用户体验。同时，为了确保在边界情况下...
js中鼠标事件mouseover、mouseenter和mouseleave、mouseout的区别
JackieDYH的博客
05-25 1万+
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave 异同体现在两个方面： 1. 是否支持冒泡 2.事件的触发时机 mouseenter事件的情况 当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。而鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触...
mouseover，mouseout，mouseenter，mouseleave的区别
客栈
04-15 455
相信做前端开发的都听说过“冒泡型事件”吧，《JavaScript高级程序设计》第九章有详细的讲述，但是，在学习的时候一知半解，也没详细去理解，导致最近在工作中碰到了问题：有许多 li 标签，标签上有2个按钮，当且仅当鼠标移入 li 时才会显示上面的2个按钮，如下图，左边是默认状态，右边是鼠标移入状态，开始使用的是 mouseover 和 mouseout ，结果鼠标移动到按钮上时，按钮会出现闪
mouseenter、mouseleave和mouseout、mouseover的区别
CodingNoob
07-02 1975
首先定义mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且 在光标移动到后代元素上不会触发。DOM2 级事件并没有定义这个事件，但DOM3 级事件将它 纳入了规范。IE、Firefox 9+和Opera 支持这个事件。mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且 在光标移动到后代元素上不会触发。DOM2
JavaScript中的mouseover与mouseenter，mouseout和mouseleave的区别
a602482790的博客
05-31 900
1、mouseover与mouseenter      mouseover事件：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。      mouseenter事件：只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。简单写个例子：[html] view plain copy<!DOCTYPE html>  <html lang="en"&...
光标和元素的关系：mouseEnter、mouseLeave、mouseOver、mouseOut
EmotionComputer
03-27 454
【代码】光标和元素的关系：mouseOver、mouseEnter、mouseOut、mouseLeave。
JavaScript常见鼠标事件
liGermini526的博客
03-16 9533
对于刚入门的前端程序员来说，js中较为重要的鼠标事件是一个重点记忆的内容，本文主要针对几个常用的鼠标事件做简单讲解，主要包括定义和使用场景。
鼠标事件mousemove、mouseover、mouseout、mouseenter、mouseleave
热门推荐
qyaroon的博客
04-19 3万+
Mousemove： 当鼠标指针在元素内移动时，mousemove事件就会被触发，任何HTML元素都可以接受此事件。 Mousemove 事件是当鼠标指针移动时触发的，即使是一个像素。这意味着多个事件在短时间内被触发。如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题。因此，优化mousemove处理程序尽可能，这一点很重要，当不再需要他们时应尽快解除
mouse鼠标事件
weixin_44388697的博客
12-21 3010
mouseover和mouseenter都是鼠标移到元素身上就触发，区别是 1、mouseover经过自身盒子触发，经过子盒子也触发，拥有冒泡特性 2、mouseenter只经过自身盒子触发，没有冒泡特性 mouseenter不会冒泡，搭配鼠标离开事件mouseleave同样不会冒泡! 1.mouseover与mouseout成对，mouseenter与mouseleave成对（连它们都成对了。。。默默画个圈） 2.mouseover触发优先级高于mouseenter，mouseout触发优先级高于mous
Mouse鼠标事件详解
q1003675852的博客
12-06 3583
页面滚动会造成它们俩的数值不一致。我们知道我们给哪个元素绑定了事件，那么这个事件就是事件源，那么，当我们用事件委托来实现一些功能的时候，我们必须要知道我们的事件源。offsetX、offsetY ：事件属性返回触发事件时 鼠标相对于事件源元素 的X,Y坐标，标准事件没有对应的属性。mouseover事件发生时，事件的目标元素是获得光标的元素，但是有获得就有失去，此时的相关元素就是失去光标的元素。这是firefox独有的事件，当鼠标向前滚动时，event.detail的值为-3的倍数，否则为3的倍数。
鼠标事件详解：mouseover与mouseenter区别
莫踌躇
12-23 864
本文详细分析了mouseover和mouseenter两种鼠标事件的差异。通过两个示例演示：当元素不含子元素时两者效果相同，但当元素包含子元素时，mouseover会在鼠标经过元素及其子元素时多次触发，而mouseenter仅在鼠标初次进入元素时触发。关键区别在于：mouseover会冒泡到子元素（对应mouseout），而mouseenter只在元素边界触发（对应mouseleave）。这对前端开发中精确控制鼠标交互行为有重要指导意义。
. mouseover、mouseout、mouseenter、mouseleave有什么区别?
最新发布
12-29
mouseover、mouseout、mouseenter、mouseleave 均为鼠标事件，它们之间的区别如下： - **触发条件**：mouseover 事件在鼠标指针穿过被选元素或其子元素时触发；mouseenter 事件仅在鼠标指针穿过被选元素时触发。mouseout 事件在鼠标指针离开被选元素或其子元素时触发；mouseleave 事件在鼠标指针离开被选元素时触发[^1]。 - **冒泡特性**：在父元素上绑定 mouseover 和 mouseout 事件，子元素同样也会触发，即子元素 mouseover 和 mouseout 事件会冒泡至父元素；而父元素绑定 mouseenter 和 mouseleave 事件只对父元素有效，子元素不会触发，即 mouseenter 和 mouseleave 事件不会冒泡至父元素。例如在一个父元素包含子元素的结构中，进入子元素时，由于子元素的 mouseover 事件冒泡到父元素中，被父元素监听到，进而触发了父元素的 mouseover 响应事件；离开子元素进入父元素时，会先触发一次 mouseout 再触发 mouseover。而使用 mouseenter 和 mouseleave 时，不会出现这种因为子元素导致的多次触发情况[^3][^4]。 - **实际应用**：在项目中，mouseout、mouseover 可能会比较少用，因为如果子元素或者父元素也绑定了相应的 mouseout、mouseover 事件，鼠标移入移出子元素或者父元素的时候，由于冒泡、和多次触发等原因，可能使得结果比较复杂。而 mouseenter 和 mouseleave 由于不冒泡，使用起来结果更清晰可控[^2]。 以下是一个简单的 HTML + jQuery 代码示例，用于演示 mouseover 和 mouseout 事件： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> body { margin-top: 100px; margin-left: 100px; } .father { width: 200px; height: 200px; background-color: blue; overflow: hidden; } .son { width: 100px; height: 100px; background-color: red; margin: 50px 50px; } </style> <script src="jquery.js"></script> <script> $(document).ready(function () { $('.father').mouseover(function () { console.log('进入'); }); $('.father').mouseout(function () { console.log('出去'); }); }); </script> <body> <div class="father"> <div class="son"></div> </div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值