15.mouseover和mouseenter的区别，父元素设置mouseover，子元素经过会触发

最新推荐文章于 2023-11-21 08:47:56 发布
最新推荐文章于 2023-11-21 08:47:56 发布
阅读量462 收藏 1
点赞数
分类专栏： 大二软设问题集合 前端 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/piaoliangj/article/details/113701829
版权

15.mouseover和mouseenter的区别——软设问题总结

15.1 两个事件从中文解释看出本质的差别

mouseover：鼠标经过事件
mouseenter：鼠标进入事件

15.2 具体区别描述

在使用该事件无子元素下，这两者是毫无差别的；
但在多数情况下，使用该事件的元素都是有子元素的，这就两者产生了区别。
mouseover：进入绑定该事件的元素和其子元素均会触发该事件，所以有一个重复触发，冒泡过程。其对应的离开事件 mouseout
mouseenter：只有进入绑定该事件的元素才会触发事件，也就是不会冒泡。其对应的离开事件mouseleave

律己以严
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
mouseover 和 mouseenter
Kate_sicheng的博客
07-10 717
经过自身盒子触发，经过子盒子也触发。【mouseover会冒泡，鼠标从外部移入子元素或从父元素移入子元素，都会先触发子元素的mouseover再触发父元素的mouseover。】 只经过自身盒子触发，不冒泡。 ： 离开自身盒子触发自身的mouseout，进入子盒子也触发自身的mouseout。【 mouseout冒泡，从子元素进入父元素时，即触发子元素的mouseout，也会触发父元素的mouseout。】：仅在自身盒子时被触发，不冒泡。结论：对于同一个元素，鼠标移入后，会先触发mouseover，再触发m
父元素上是mousedown.prevent，子元素会被携带方法，还阻止不了怎么办？
m0_61177996的博客
08-08 770
父元素上是mousedown.prevent，子元素会被携带方法，还阻止不了怎么办？
给父元素绑定事件，触发事件event.target却是子元素
weixin_41559882的博客
08-17 1849
给父元素绑定事件，触发事件event.target却是子元素。若要拿绑定事件的初始元素，可用event.currentTarget 转载https://blog.csdn.net/yang1067155909/article/details/97273820
Mouseout 和 MouseOver 事件有子元素的情况
Web前端
09-18 742
大家都熟悉mouseout 和 mouseover事件，就是鼠标移出和鼠标掠过事件，但是还是有部分人不知道在有子元素的情况下，同时还会鼠标的移出和掠过子元素的时候都会在中再一次触发。可以看个例子：   <html><head> <meta http-equiv="Content-Type" content="text/html; charset=G...
onmouseout，mouseover经过子元素也触发的问题解决方案（兼容）
lyq344103256的专栏
11-11 2628
在mouseout与mouseover的冒泡问题上，相信有很多朋友都遇到过。今天这里就总结一下关于mouseover和mouseout冒泡问题的解决方案：   首先，看下event.relatedTarget的用法。 relatedTarget 事件属性返回与事件的目标节点相关的节点。 relatedTarget不支持IE。 对于 mouseover 事件来说，该属性
经过绑定元素时会多次触发mouseover和mouseout事件
12-09
javascript的mouseover和mouseout事件，在绑定元素内部有子元素的情况下， 经过绑定元素时会多次触发mouseover和mouseout事件。 jquery解决办法: jquery的mouseenter和mouseleave方法已经修复了这个问题，可以直接...
浅谈JQ中mouseover和mouseenter的区别
09-01
这意味着，如果一个元素内嵌套有其他元素，当鼠标从父元素移动到子元素上时，`mouseover` 会再次触发。这可能导致多次触发，特别是在具有复杂布局的页面上，可能会导致不必要的行为。 例如，在提供的HTML代码中，有...
鼠标经过子元素触发mouseout，mouseover事件的解决方案
09-03
标题提到的问题是，当鼠标经过子元素时，意外触发了父元素的`mouseout`和`mouseover`事件，从而影响了预期的效果。下面将详细讨论这个问题以及解决方案。 首先，我们需要了解`mouseover`和`mouseout`事件的工作原理...
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
09-03
mouseover ,mouseout ,mouseenter,mouseleave，都是鼠标点击而触发的事件，各自代表什么意思，有哪些区别呢？下面跟着脚本之家小编一起看看吧
javascript中mouseenter与mouseover的异同
10-19
javascript中mouseover和mouseenter的区别主要在于监听对象的子元素是否触发事件。mouseover：鼠标移入监听对象中，或者从监听对象的一个子元素移入另一个子元素中时触发该事件。mouseenter：鼠标移入监听对象时触发...
React 解决鼠标移入子元素触发父元素的mouseout事件
qq_36904182的博客
12-21 4127
方法一、 用mouseleave/mouseenter代替mouseover/mouseout【最佳方法】 mouseover 与 mouseenter: mouseover => 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。 mouseenter => 只有在鼠标指针从元素外穿入被选元素（到元素内）时，才会触发 mouseenter 事件。 mouseout 与 mouseleave: mouseout => 不论鼠标指针离开被选元素还是任何子元素，都会触发
如何解决鼠标移动到子元素 会触发父元素的mouseout事件
weixin_45899022的博客
07-07 1593
用mouseleave/mouseenter代替mouseover/mouseout mouseover与mouseenter mouseover => 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。 mouseenter => 只有在鼠标指针从元素外穿入被选元素（到元素内）时，才会触发 mouseenter 事件。 mouseout与mouseleave mouseout => 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 mou
mouseover、mouseenter、mousemove之间的区别
lianflower的博客
02-27 1542
转载：https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseenter_mouseover#:~:text=mouseenter%20and%20mouseover.-,The%20mouseover%20event%20triggers%20when%20the%20mouse%20pointer%20enters%20the,moved%20over%20the%20div%20element.
mouseenter和mouseover的区别
最新发布
qq_66442729的博客
11-21 701
这意味着如果有多个元素嵌套在一起并且绑定了mouseenter和mouseover事件，那么当鼠标从子元素移动到父元素时，只会触发一次mouseenter事件，并不会冒泡到父元素。而mouseover事件会在每个元素上都触发。mouseenter只考虑鼠标是否进入了元素自身，而不考虑鼠标是否进入了元素的子元素。而mouseover则会为鼠标指针进入和离开元素及其子元素触发事件。mouseenter只有在鼠标进入元素时触发，而mouseover在鼠标进入或者在元素内移动时都会触发。
js中鼠标事件mouseover、mouseenter和mouseleave、mouseout的区别
热门推荐
JackieDYH的博客
05-25 1万+
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave 异同体现在两个方面： 1. 是否支持冒泡 2.事件的触发时机 mouseenter事件的情况 当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。而鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触...
父元素绑定mousedown其子元素也会默认被绑上
sw_onload的博客
03-26 1163
最近在做滑块验证，从百度上找来一个使用mousedown、onmousemove、onmouseup来实现，然后点击绑定了mousedown事件的滑块，打印出来的e.target有时候会是其里面的子元素 代码如下： 打印出来的e.target 只要鼠标碰到i标签，后面移动的就是i标签，可是这并不是我想要的，我想要移动的是slider，不是一个标签。但是mousedown本身就是这样，看了文档...
javascript中的常见事件
wdtn5656的博客
10-26 881
javascript中的常见事件&绑定事件&事件的解绑&常见的事件类型&函数在内存中的运行情况&鼠标事件&键盘事件&事件对象
经过子元素触发父元素onmouseout，mouseover事件的问题和解决方法
weixin_30659829的博客
10-06 504
众所周知鼠标滑入子元素会触发父元素的onmouseout,而划出会触发父元素的onmouseover,这其实给了我们很多麻烦，相信有很多朋友都遇到过。(很多人认为这是冒泡引起的,其实不是) 这麻烦在IE下很好解决,IE提供了onmouseleave和onmouseenter两个事件可以解决这个问题。可惜其他浏览器都不支持这两个事件,那怎么办呢? 其实可以利用event.relatedTarge...
mouseover和mouseenter区别
04-11
mouseover和mouseenter是两个JavaScript事件。mouseover事件在鼠标移动到一个元素上时触发，不管鼠标是否跨越了元素的边界（也就是鼠标是否从这个元素的子元素移出）。mouseenter事件在鼠标移动到一个元素上时触发，但只有在鼠标从该元素的外部（而不是子元素内部）移入时才触发该事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值