mouseenter和mouseover的区别

article/2025/11/10 6:23:20

mouseover:当鼠标移入目标元素或者移入目标元素的子元素,都会触发该事件。所以有一个重复触发,冒泡的过程。对应的一出事件mouseout

mouseenter:当鼠标移入目标元素时(不包括子元素),会触发该事件,不会发生冒泡。对应的移除事件是mouseleave

区别:

1. 是否支持冒泡

2. 事件的触发时机

 mouseenter:

当鼠标从元素的边界之外移入元素的边界之内时,事件被触发。而当鼠标本身在元素的边界内时,要触发该事件,必须先将鼠标移出元素边界外,再次移入才能触发。也就是说,mouseover支持事件冒泡,mouseenter不支持事件冒泡。

结论:

mouseover事件因其具有冒泡的性质,在子元素内移除的时候,频繁触发,如果我们不希望如此,可以使用mouseenter事件代替。但是早期只有IE浏览器支持该事件,虽然现在大多数高级浏览器支持了mouseenter事件,但是难免会有兼容问题,所以可以自己手动模拟。

参考链接:https://juejin.im/post/5935773fa0bb9f0058edbd61


http://chatgpt.dhexx.cn/article/LUeSsxf4.shtml

相关文章

jQuery学习:mouseenter与mouseover区别

mouseenter:只有移入当前元素才会触发&#xff0c;对应mouseleave hover使用的是mouseenter与mouseleave mouseover&#xff1a;在移入子元素时也会触发&#xff0c;对应mouseout <div id"div1">div1<div id"div2">div2</div></div&…

mouseentermouseleave

mouseenter&mouseleave 简介 mouseenter当指针设备&#xff08;通常是鼠标&#xff09;移动到连接了侦听器的元素上时&#xff0c;会触发该事件。 mouseover 当指针设备&#xff08;通常是鼠标&#xff09;移动到附加了侦听器的元素或其子项之一上时&#xff0c;会触发该事…

mouseenter

这几天做下拉菜单&#xff0c;一直想实现鼠标停留在以及菜单即可显示二级菜单并可以浏览二级菜单的功能&#xff0c;最初走了很多弯路。 dropdown 写在是用Bootstrap.js …

mouseenter与mouseover的区别

这是两个事件类型&#xff0c;都是表示鼠标经过触发事件。 还有对应的mouseleave和mouseout&#xff0c;表示鼠标移开触发事件 区别是&#xff1a;mouseenter、mouseleave 不触发冒泡事件 mouseover、mouseout 会触发冒泡事件 首先事件触发后会产生两个阶段&#xff0c;一个是…

简单了解mouseover与mouseenter的使用场景

我们知道鼠标经过和离开的事件有俩种&#xff1a; mouseenter与mouseover&#xff0c;那么这里俩个事件有什么区别呢&#xff1f; mouseenter&#xff1a;给谁注册的事件&#xff0c;就必须经过谁&#xff0c;才能触发该事件 简单来说mouseenter不能冒泡&#xff0c;也就是说经…

mouseenter鼠标事件

mouseenter鼠标事件 1.当鼠标移动到元素上时就会触发mouseenter事件 2.类似mouseover&#xff0c;它们两者之间的差别是 mouseover鼠标经过自身盒子会触发&#xff0c;经过子盒子还会触发。mouseenter只会经过自身盒子触发 这样的原因就是 mouseenter不会冒泡。 <!DOCTYP…

mouseenter和mouseleave与mouseover和mouseout的区别

一、mouseenter&#xff08;指针穿过&#xff0c;子集不执行&#xff09; 当鼠标指针穿过&#xff08;进入&#xff09;被选元素时&#xff0c;会发生 mouseenter 事件。 mouseenter() 方法触发 mouseenter 事件&#xff0c;或添加当发生 mouseenter 事件时运行的函数。 注意…

mouseenter、mouseleave、mouseover和mouseout的区别

mouseenter(进入)、mouseleave、mouseover(覆盖)和mouseout是常用来判断鼠标移出和移入的事件句柄&#xff0c;虽然功能上差不多&#xff0c;但是细节却有不同的地方。 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>随…

mouseover事件和mouseenter事件以及mouseleave事件和mouseout事件的区别

1.mouseover事件与mouseenter事件 mouseover事件&#xff1a;不论鼠标指针穿过被选元素或其子元素&#xff0c;都会触发 mouseover 事件。 mouseenter事件&#xff1a;只有在鼠标指针穿过被选元素时&#xff0c;才会触发 mouseenter 事件。 2.mouseout事件与mouseleave事件 …

Git - 教程(廖雪峰)

史上最浅显易懂的Git教程&#xff01; 为什么要编写这个教程&#xff1f;因为我在学习Git的过程中&#xff0c;买过书&#xff0c;也在网上Google了一堆Git相关的文章和教程&#xff0c;但令人失望的是&#xff0c;这些教程不是难得令人发指&#xff0c;就是简单得一笔带过&am…

廖雪峰git学习(3)分支管理【待续】

创建与合并分支 创建分支 git checkout -b dev #创建并切换到分支dev相当于以下两条 git branch dev #创建分支dev git checkout dev #切换到分支dev git branch #可查看当分支 合并分支 git merge dev #将dev分支与master分支合并 删除分支 git branch -d dev#删除dev分支

Git操作——廖雪峰Git教程

这个笔记主要记录的命令&#xff0c;用来翻查命令使用。 学习了一部分&#xff0c;剩下的部分后续更新o(&#xffe3;▽&#xffe3;)ブ 廖雪峰的Git教程 零散的命令&#xff1a; 显示当前目录——pwd显示隐藏目录——ls -ah查看文件 —— cat <文件名> 创建版本库 …

廖雪峰git教程学习记录

1. 下载安装 git官网下载&#xff1a;https://git-scm.com/downloads 百度网盘链接: https://pan.baidu.com/s/1quoLbBcbWaGJ05do4DX9Pw 提取码: xqe3 直接下载安装&#xff0c;完成后在开始菜单找“Git”--“Git Bash” 点击打开&#xff0c;如下图形式显示 安装成功。 2. …

Python 爬虫:把廖雪峰的教程转换成 PDF 电子书

。前两天&#xff0c;有读者在微信公众平台 问道&#xff1a;可以推荐一本 Python 入门的教程吗&#xff1f;我说&#xff1a;廖雪峰的 Python 教程她说&#xff1a;有没有电子书呢&#xff1f;我说&#xff1a;没有&#xff0c;但你可以用 Google 搜一下&#xff0c;找到了记得…

git常用命令总结--廖雪峰老师Git教程命令总结

学习了廖雪峰老师的Git教程之后的命令总结&#xff0c;重点更新第十项关于git和远程仓库的东西。 如果没有学过&#xff0c;这是传送门 2021.02.19更新&#xff1a;第十章第12节--切换远程分支并拉取远程分支到本地&#xff0c;第十章第13节--git不用每次都要输入用户名密码 …

学习廖雪峰的Git教程

学习廖雪峰的git教程&#xff1a;http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 1.创建版本库&#xff1a; 在一个空目录下&#xff1a;git init 把这个目录变成Git可以管理的仓库。 2.添加文件到仓库&#xff1a; 添加文件到仓库目…

git学习笔记——廖雪峰git教程

OK&#xff0c;先附上教程——廖雪峰的官方网站 友情连接&#xff1a;git官网 简介 这里我只想引用他的原文&#xff1a; Linus可以向BitMover公司道个歉&#xff0c;保证以后严格管教弟兄们&#xff0c;嗯&#xff0c;这是不可能的。实际情况是这样的&#xff1a; Linus花了…

廖雪峰Git学习笔记(超级无敌详细)

Git 1. 创建仓库1.1初始化一个Git仓库1.2 添加文件到Git仓库 2. 时光穿梭2.1 版本回退2.2 工作区和暂存区2.3 管理修改2.4 撤销修改2.5 删除文件 3. 远程仓库3.1 添加远程仓库3.2 删除远程仓库3.3 从远程仓库克隆 4. 分支管理4.1 创建与合并分支4.1.1 创建分支4.1.2 合并分支4.…

廖雪峰git教程学习

廖雪峰git教程 git – Linus在2周内用c写的 1.1 基本概念 版本控制系统&#xff0c;追踪文本文件的改动&#xff0c;文件、视频等二进制文件则不可追踪&#xff08;微软的word也是二进制文件&#xff09;HEAD 指向当前分支&#xff0c;表示当前版本&#xff08;最新的提交&am…

廖雪峰Git教程笔记

文章目录 1 什么是Git1.1 Git的诞生1.2 集中式vs分布式1.3 安装Git1.3.1 在Windows上安装Git1.3.2 在Linux上安装Git 1.4 创建第一个项目learngit1.4.1 创建版本库1.4.2 初始化仓库1.4.3 添加文件到版本库1.4.4 Git使用小结 2 版本控制2.1 版本更新2.1.1 git status查看仓库状态…