当前位置： 首页 > news >正文

vue 实现弹出菜单，解决鼠标点击其他区域的检测问题

news 2026/2/9 22:29:54

弹出菜单应该具有的功能，当鼠标点击其他区域时，则关闭该菜单。
问题来了，怎么检测鼠标点击了其他区域而不是当前菜单？
百度“JS检测区域外的点击事件”，会发现有很多方法，有递归检测父元素，有遍历冒泡节点等等。
vue 解决的思路：将菜单区域的点击事件用 stop 修饰，在最顶层元素调用鼠标单击事件关闭菜单，完毕！
由于菜单区域单击事件已被 stop 停止冒泡，顶层元素无法捕获，因此菜单区域的单击并不会关闭自己。这样，不需要增加任何逻辑代码，只需要在单击事件后增加一个 .stop 后缀来修饰就能解决。

演示效果和源码如下：
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script><title>弹出菜单测试1</title><style>body {padding: 0; margin: 0;}#base {width: 100%;height: 100%;position: absolute;}#nav { margin: 16px;}#nav>span {display: inline-block;border: 1px solid #bbb;background-color: #ebf4f6;border-radius: 6px;padding: 6px 18px;user-select: none;}#nav>span:hover {background-color: #ace4eb;}.menu>div {display: flex;justify-content: flex-start;flex-direction: column;width: 160px;border: 1px solid #bbb;border-radius: 6px;padding: 12px 0;box-shadow: 0px 0px 5px #999;position: absolute;}.menu>div>div {width: 148px;height: 32px;margin: 0 6px;line-height: 32px;border-radius: 4px;text-align: center;}.menu>div>div:hover {background-color: #ace4eb;}hr {width: 154px;height: 1px;color: #808080;margin: 5px 2px;}</style>
</head>
<body><div id="base" @click="pickOther"><div id="nav" @click.stop="showMenu"><span id="ck1">手机</span><span id="ck2">电脑</span><span id="ck3">家具</span></div><div @click.stop="pickMenu" class="menu"><div v-if="cMenu=='ck1m'" id="ck1m"><div>手机通讯</div><div>手机配件</div><div>运营商</div><div>智能设备</div></div><div v-if="cMenu=='ck2m'" id="ck2m"><div>电脑整机</div><div>电脑配件</div><hr><div>外设产品</div><div>游戏设备</div><div>游戏设备</div><div>办公设备</div></div><div v-if="cMenu=='ck3m'" id="ck3m"><div>家电厨具</div><div>家装软饰</div><div>生活日用</div><div>灯具五金</div></div></div></div><script>var vm = new Vue({el: '#base',data: { cMenu: '' },  // cMenu 为空时不显示任何菜单methods: {showMenu: function () {const btn = event.target;if (btn.nodeName.toUpperCase() != 'SPAN') return;// 计算菜单的新坐标const e = $(btn);const x = e.offset().left + e.innerWidth();const y = e.offset().top + e.innerHeight();// 弹出菜单跟随按钮位置而移动，这里需要二次渲染(1 显示菜单，2 移动菜单)const id = btn.id + 'm';this.cMenu = id;this.$nextTick(e => { $('#' + id).css({ "top": y, "left": x }); });},// 鼠标点击全部区域，菜单区域的单击被阻断冒泡不会触发此函数pickOther: function () { this.cMenu = ''; },// 点击菜单区域时，给出当前点击的菜单名pickMenu: function () { console.log($(event.target).text()); }}});</script>
</body>
</html>

相关文章：

vue 实现弹出菜单，解决鼠标点击其他区域的检测问题

弹出菜单应该具有的功能&#xff0c;当鼠标点击其他区域时&#xff0c;则关闭该菜单。 问题来了&#xff0c;怎么检测鼠标点击了其他区域而不是当前菜单&#xff1f; 百度“JS检测区域外的点击事件”&#xff0c;会发现有很多方法&#xff0c;有递归检测父元素&#xff0c;有遍…...

编程日记 2023/9/30 15:24:06

经典网络解（三） 生成模型VAE | 自编码器、变分自编码器|有监督，无监督

文章目录 1 有监督与无监督2 生成模型2.1 重要思路 3 VAE编码器怎么单独用&#xff1f;解码器怎么单独用&#xff1f;为什么要用变分变分自编码器推导高斯混合模型 4 代码实现 之前我们的很多网络都是有监督的 生成网络都是无监督的&#xff08;本质就是密度估计&#xff09;&a…...

编程日记 2023/9/30 15:23:04

gif怎么转换成视频MP4？

gif怎么转换成视频MP4&#xff1f;GIF动图已成为一种风靡网络的流行的特殊图片文件&#xff0c;其循环播放和逐帧呈现的特点使其在社交媒体、聊天应用等场合广泛应用&#xff0c;平时我们进行群聊是&#xff0c;大家总会一些gif动态表情的出现而感觉非常的开行&#xff0c;gif动…...

编程日记 2023/9/30 15:21:02

标准化、逻辑回归、随机梯度参数估计

机器学习入门 数据预处理&#xff1a; 将&#xff1f;替换为缺失值 data data.replace(to_replace"?",valuenp.nan)丢掉缺失值 data.dropna(how"any) #howall删除全是缺失值的行和列 #haowany删除有缺失值的行和列将数据集划分成测试集和训练集 data[colu…...

编程日记 2023/9/30 15:19:01

【数据结构】【C++】封装哈希表模拟实现unordered_map和unordered_set容器

【数据结构】&&【C】封装哈希表模拟实现unordered_map和unordered_set容器 一.哈希表的完成二.改造哈希表(泛型适配)三.封装unordered_map和unordered_set的接口四.实现哈希表迭代器(泛型适配)五.封装unordered_map和unordered_set的迭代器六.解决key不能修改问题七.实…...

编程日记 2023/9/30 15:15:58

26967-2011 一般用喷油单螺杆空气压缩机

声明 本文是学习GB-T 26967-2011 一般用喷油单螺杆空气压缩机. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了一般用喷油单螺杆空气压缩机(以下简称"单螺杆空压机")的术语和定义、型号、基本 参数、要求、试验方法、…...

编程日记 2023/9/30 15:12:55

Opengl之模板测试

当片段着色器处理完一个片段之后&#xff0c;模板测试(Stencil Test)会开始执行&#xff0c;和深度测试一样&#xff0c;它也可能会丢弃片段。接下来&#xff0c;被保留的片段会进入深度测试&#xff0c;它可能会丢弃更多的片段。模板测试是根据又一个缓冲来进行的&#xff0c;…...

编程日记 2023/9/30 15:09:52

iPhone苹果手机复制粘贴内容提示弹窗如何取消关闭提醒？

经常使用草柴APP查询淘宝、天猫、京东商品优惠券拿购物返利的iPhone苹果手机用户&#xff0c;复制商品链接后打开草柴APP粘贴商品链接查券时总是弹窗提示粘贴内容&#xff0c;为此很多苹果iPhone手机用户联系客服询问如何关闭iPhone苹果手机复制粘贴内容弹窗提醒功能的方法如下…...

编程日记 2023/9/30 15:04:48

释放潜力：人工智能对个性化学习的影响

人工智能有潜力通过使个性化学习成为一种实用且可扩展的方法来彻底改变教育。它使教育工作者能够满足每个学生的独特需求&#xff0c;促进参与并提高整体学习成果。然而&#xff0c;必须解决道德问题&#xff0c;并确保技术仍然是教育工作者手中的工具&#xff0c;为学生创造更…...

编程日记 2023/9/30 15:03:46

什么是Local Storage和Session Storage？它们之间有什么区别？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是 Local Storage 和 Session Storage&#xff1f;Local Storage&#xff08;本地存储&#xff09;Session Storage&#xff08;会话存储&#xff09; ⭐ 区别⭐ 示例⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的…...

编程日记 2023/9/30 15:01:45

单样本T检验|独立样本T检验|配对样本T检验(绘图)

学生 t 检验的基本思想是通过比较两组数据的均值以及它们的方差来判断是否存在显著差异。下面更详细地解释了学生 t 检验的基本思想&#xff1a; 均值比较&#xff1a;学生 t 检验的首要目标是比较两组数据的均值。我们通常有一个零假设&#xff08;null hypothesis&#xff09…...

编程日记 2023/9/30 15:00:44

全面解读 SQL 优化 - 统计信息

一、简介 数据库中的优化器&#xff08;optimizer&#xff09;是一个重要的组件&#xff0c;用于分析 SQL 查询语句&#xff0c;并生成执行计划。在生成执行计划时&#xff0c;优化器需要依赖数据库中的统计信息来估算查询的成本&#xff0c;从而选择最优的执行计划。以下是关…...

编程日记 2023/9/30 14:58:41

Spring整合RabbitMQ——生产者

1.生产者整合步骤 添加依赖坐标&#xff0c;在producer和consumer模块的pom文件中各复制一份。 配置producer的配置文件 配置producer的xml配置文件 编写测试类发送消息...

编程日记 2023/9/30 14:54:38

Spring的注解开发-Bean基本注解开发

Bean基本注解开发 Spring除了xml配置文件进行配置之外&#xff0c;还可以使用注解方式进行配置&#xff0c;注解方式慢慢成为xml配置的替代方案。我们有了xml开发的经验&#xff0c;学习注解开发就会方便很多&#xff0c;注解开发更加快捷方便。Spring提供的注解有三个版本 2.…...

编程日记 2023/9/30 14:53:37

【Ubuntu18.04】Autoware.ai安装

Autoware.ai安装 引言1 ROS安装2 Ubuntu18.04安装Qt5.14.23 安装GCC、G4 Autoware.ai-1.14.0安装与编译4.1 源码的编译4.1.1 python2.7环境4.1,2 针对Ubuntu 18.04 / Melodic的依赖包安装4.1.3 先安装一些缺的ros依赖4.1.4 安装eigen3.3.74.1.5 安装opencv 3.4.164.1.6 编译4.1…...

编程日记 2023/9/30 14:49:33

SpringMVC 学习（一）Servlet

本系列文章为【狂神说 Java 】视频的课堂笔记&#xff0c;若有需要可配套视频学习。 1. Hello Servlet (1) 创建父工程 删除src文件夹 引入一些基本的依赖 <!--依赖--> <dependencies><dependency><groupId>junit</groupId><artifactId>…...

编程日记 2023/9/30 14:48:32

26943-2011 升降式高杆照明装置 课堂随笔

声明 本文是学习GB-T 26943-2011 升降式高杆照明装置. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了升降式高杆照明装置的技术要求、试验方法、检验规则以及标志、包装、运输及贮 存等。 本标准适用于公路、广场、机场、港口、…...

编程日记 2023/9/30 14:47:32

洛谷题解 | AT_abc321_c Primes on Interval

目录 题目翻译题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 样例 #3样例输入 #3样例输出 #3 题目简化题目思路AC代码 题目翻译 【题目描述】 你决定用素数定理来做一个调查. 众所周知, 素数又被称为质数&#xff0c;其含义就是除了数…...

编程日记 2023/9/30 14:46:30

Quartus医院病房呼叫系统病床呼叫Verilog，源代码下载

名称&#xff1a;医院病房呼叫系统病床呼叫 软件&#xff1a;Quartus 语言&#xff1a;Verilog 要求&#xff1a; 1、用1~6个开关模拟6个病房的呼叫输入信号,1号优先级最高;1~6优先级依次降低; 2、 用一个数码管显示呼叫信号的号码;没信号呼叫时显示0;有多个信号呼叫时,显…...

编程日记 2023/9/30 14:45:29

ip的标准分类---分类的Ip

分类的 IP 即将 IP 地址划分为若干个固定类&#xff0c;每一类地址都由两个固定长度的字段组成。 其中第一个字段是网络号&#xff08;net-id&#xff09;&#xff0c;它标志主机或路由器所连接的网络。一个网络号在整个因特网内必须是唯一的。 第二个字段是主机号&#xf…...

编程日记 2023/9/30 14:44:28

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/12/11 18:28:17

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2026/2/1 1:50:03

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2026/1/29 8:41:55

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/11/21 22:02:37

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2026/1/29 3:55:23

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2026/1/31 2:59:25