浅谈js中onmouseleave和onmouseout的区别

在这里插入图片描述
同步发布于我的网站 🚀

  • 背景介绍
  • 基本概念
  • 区别详解
    • 无子元素的情况
    • 有子元素的情况
  • 实际应用场景
    • 使用 onmouseleave
    • 使用 onmouseout
  • 注意事项
  • 总结

背景介绍

在前端开发中,我们经常需要为元素绑定鼠标事件,以实现各种交互效果。onmouseleaveonmouseout 是两个常用的鼠标离开事件,它们在某些情况下表现相似,但在具体的行为上有明显的区别。了解这些区别有助于我们在实际开发中选择合适的事件,提高用户体验。

基本概念

  • onmouseleave:当鼠标指针离开指定的元素时触发。这个事件不会冒泡,也就是说,当鼠标从父元素移动到子元素时,不会触发 onmouseleave 事件。
  • onmouseout:当鼠标指针离开指定的元素或其子元素时触发。这个事件会冒泡,也就是说,当鼠标从父元素移动到子元素时,会触发 onmouseout 事件。

区别详解

无子元素的情况

当元素没有子元素时,onmouseleaveonmouseout 的行为是一致的。无论鼠标指针从哪个方向离开元素,都会触发这两个事件。

<div id="no-child" style="width: 100px; height: 100px; background-color: lightblue;">无子元素
</div><script>document.getElementById('no-child').addEventListener('mouseleave', () => {console.log('mouseleave triggered');});document.getElementById('no-child').addEventListener('mouseout', () => {console.log('mouseout triggered');});
</script>
有子元素的情况

当元素有子元素时,onmouseleaveonmouseout 的行为差异明显。

  • onmouseleave:只有当鼠标指针完全离开父元素的边界时才会触发。鼠标从父元素移动到子元素时,不会触发 onmouseleave 事件。
  • onmouseout:当鼠标指针从父元素移动到子元素时,也会触发 onmouseout 事件。这是因为 onmouseout 事件会冒泡。
<div id="parent" style="width: 200px; height: 200px; background-color: lightgreen;">父元素<div id="child" style="width: 100px; height: 100px; background-color: lightcoral;">子元素</div>
</div><script>document.getElementById('parent').addEventListener('mouseleave', () => {console.log('mouseleave triggered');});document.getElementById('parent').addEventListener('mouseout', () => {console.log('mouseout triggered');});
</script>

实际应用场景

使用 onmouseleave
  • 工具提示:当鼠标离开某个元素时隐藏工具提示,使用 onmouseleave 可以避免在子元素上频繁触发事件。
  • 菜单栏:当鼠标离开菜单栏时关闭下拉菜单,使用 onmouseleave 可以确保只有当鼠标完全离开菜单栏时才关闭菜单。
使用 onmouseout
  • 计数器:记录鼠标离开某个元素的次数,使用 onmouseout 可以更精确地统计每次鼠标离开的情况。
  • 动态效果:在鼠标离开某个元素时触发动态效果,使用 onmouseout 可以在鼠标离开任何子元素时立即触发效果。

注意事项

  1. 事件冒泡onmouseout 事件会冒泡,可能会导致不必要的事件触发。使用 event.stopPropagation() 可以阻止事件冒泡。
  2. 性能优化:在处理大量元素时,尽量减少事件绑定的数量,可以使用事件委托来优化性能。
  3. 兼容性:虽然现代浏览器普遍支持 onmouseleaveonmouseout,但仍需注意老版本浏览器的兼容性问题。

总结

onmouseleaveonmouseout 在无子元素的情况下行为一致,但在有子元素的情况下表现不同。onmouseleave 不会冒泡,更适合处理复杂的嵌套结构;onmouseout 会冒泡,适合需要精确统计鼠标离开情况的场景。希望本文对您有所帮助!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/62500.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Git系列】利用 Bash 脚本获取 Git 最后一次非合并提交的提交人

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

36 基于单片机的电磁炉系统设计

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于51单片机&#xff0c;通过DS18B20温度传感器检测温度&#xff0c;通过八位数码管显示&#xff0c; 如果温度超过阈值&#xff0c;则蜂鸣器报警&#xff0c;红灯亮起&#xff1b;若不超过阈值&…

『 Linux 』数据链路层 - ARP协议及数据链路层周边问题

文章目录 ARP协议ARP欺骗RARP协议 DNS服务ICMP协议ping 命令正向代理服务器反向代理服务器 ARP协议 博客『 Linux 』数据链路层 - MAC帧/以太网帧中提到,当数据需要再数据链路层进行无网络传输时需要封装为MAC帧,而MAC帧的报文结构如下: 帧头部分存在两个字段分别为 “目的地址…

MySQL(数据库)

1.数据库? 数据库是管理数据(增删改查CRUD)的软件 MySQL(开源&免费) 是一个数据库软件 (客户端-服务器)结构的软件 客户端服务器通过网络进行通信 客户端(Client):主动发起请求的一方,客户端给服务器发起的数据称为请求(request) 服务器(Server):被动接受请求的一方,…

vue3----API

组合式API 1.setup 定义的数据和方法必须return出去才能够被使用 不使用this,this指向了undefined <script> export default {setup () {console.log(setup)const message this is messageconst logmessage ()>{console.log(message)}return {message,logmessag…

服务器遭受DDoS攻击后如何恢复运行?

当服务器遭受 DDoS&#xff08;分布式拒绝服务&#xff09;攻击 后&#xff0c;恢复运行需要快速采取应急措施来缓解攻击影响&#xff0c;并在恢复后加强防护以减少未来攻击的风险。以下是详细的分步指南&#xff1a; 一、应急处理步骤 1. 确认服务器是否正在遭受 DDoS 攻击 …

【maven-5】Maven 项目构建的生命周期:深入理解与应用

1. 生命周期是什么 ​在Maven出现之前&#xff0c;项目构建的生命周期就已经存在&#xff0c;软件开发人员每天都在对项目进行清理&#xff0c;编译&#xff0c;测试及部署。虽然大家都在不停地做构建工作&#xff0c;但公司和公司间&#xff0c;项目和项目间&#xff0c;往往…

【机器学习】CatBoost 模型实践:回归与分类的全流程解析

一. 引言 本篇博客首发于掘金 https://juejin.cn/post/7441027173430018067。 PS&#xff1a;转载自己的文章也算原创吧。 在机器学习领域&#xff0c;CatBoost 是一款强大的梯度提升框架&#xff0c;特别适合处理带有类别特征的数据。本篇博客以脱敏后的保险数据集为例&#x…

lua download

https://www.lua.org/ https://www.lua.org/versions.html#5.4

Java 中的 ResponseBodyEmitter:详解与实战

Java 中的 ResponseBodyEmitter&#xff1a;详解与实战 前言 在开发高并发应用或处理长时间任务时&#xff0c;服务端需要向客户端实时推送数据&#xff0c;而不是一次性将所有结果返回。Spring 提供了一种优雅的解决方案&#xff1a;ResponseBodyEmitter。它适用于需要逐步发…

基于大数据python 房屋价格数据分析预测可视化系统(源码+LW+部署讲解+数据库+ppt)

&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 很对人不知道选题怎么选 不清楚自己适合做哪块内容 都可以免费来问我 避免后期給自己答辩找麻烦 增加难度&#xff08;部分学校只有一次答辩机会 没弄好就延迟…

pikachu文件上传漏洞通关详解

声明&#xff1a;文章只是起演示作用&#xff0c;所有涉及的网站和内容&#xff0c;仅供大家学习交流&#xff0c;如有任何违法行为&#xff0c;均和本人无关&#xff0c;切勿触碰法律底线 目录 概念&#xff1a;什么是文件上传漏洞一、客户端check二、MIME type三、getimagesi…

lua-cjson 例子

apt install -y lua-cjson 安装 编辑 tmp.lua cjson require "cjson" p 666 d "23.42" payload{"d":[{"pres":..(p)..,"temp":"..(d).."}]} print("payload " .. payload) j cjson.decode(payloa…

Monitor 显示器软件开发设计入门二

基础篇--显示驱动方案输出接口介绍 写在前面&#xff1a;首先申明&#xff0c;这篇文章是写给那些初入显示器软件行业的入门者&#xff0c;或是对显示器没有基本知识的小白人员。如您是行业大咖大神&#xff0c;可以绕行&#xff0c;可看后期进阶文章。 上篇介绍了输入接口及相…

像素流送api ue多人访问需要什么显卡服务器

关于像素流送UE推流&#xff0c;在之前的文章里其实小芹和大家聊过很多&#xff0c;不过今天偶然搜索发现还是有很多小伙伴&#xff0c;在搜索像素流送相关的问题&#xff0c;搜索引擎给的提示有这些。当然这些都是比较短的词汇&#xff0c;可能每个人真正遇到的问题和想获取的…

【21-30期】Java技术深度剖析:从分库分表到微服务的核心问题解析

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;Java &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; 文章题目&#xff1a;Java技术深度剖析&#xff1a;从分库分表到微服务的核心问题解析 摘要&#xff1a; 本…

C#里怎么样List类进行拷贝?

演示的代码: using System; using System.Collections; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace ConsoleApp1 { internal class Program { static void Main(string[] args) …

Flutter 权限申请

这篇文章是基于permission_handler 10.2.0版本写的 前言 在App开发过程中我们经常要用到各种权限&#xff0c;我是用的是permission_handler包来实现权限控制的。 pub地址&#xff1a;https://pub.dev/packages/permission_handler permission_handler 权限列表 变量 Androi…

C#:时间与时间戳的转换

1、将 DateTime 转换为 Unix 时间戳&#xff08;秒&#xff09; public static long DateTimeToUnixTimestamp(DateTime dateTime) {// 定义UTC纪元时间DateTime epochStart new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);// 计算从UTC纪元时间到指定时间的总秒数Tim…

【Spring】Spring IOCDI:架构旋律中的“依赖交响”与“控制华章”

前言 &#x1f31f;&#x1f31f;本期讲解关于Spring IOC&DI的详细介绍~~~ &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; 你的点赞就是小编不断更新的最大动力 &#x1f386;那么…