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

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

news 文章来源：https://blog.csdn.net/yxp_xa/article/details/133283579 2025/1/11 14:48:43

弹出菜单应该具有的功能，当鼠标点击其他区域时，则关闭该菜单。
问题来了，怎么检测鼠标点击了其他区域而不是当前菜单？
百度“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#的Channel：从使用案例到源码解读（一）

引言 在C#的并发编程中&#xff0c;Channel是一种非常强大的数据结构&#xff0c;用于在生产者和消费者之间进行通信。本文将首先通过一个实际的使用案例&#xff0c;介绍如何在C#中使用Channel&#xff0c;然后深入到Channel的源码中&#xff0c;解析其内部的实现机制。 使用案…...

编程日记 2023/9/30 14:43:27

如何让git命令仅针对当前目录

背景 我们有时候建的git仓库是这样的&#xff0c;a目录下有b、c、d三个模块&#xff08;文件夹&#xff09;。有时候只想查看b下面的变化&#xff0c;而使用 git status、git diff 的时候会把c和d的变化都列出来&#xff0c;要怎么只查b目录的变化&#xff1f; 操作 要查b目…...

编程日记 2023/9/30 14:40:24

【0223】源码剖析smgr底层设计机制（3）

1. smgr设计机制 PG内核中smgr完整磁盘存储介质的管理是通过下面三部分实现的。 1.1 函数指针结构体 f_smgr 函数指针结构体 f_smgr。 通过该函数指针类型，可完成类似于UNIX系统中的VFD功能，上层只需要调用open()、read()、write()等系统函数，用户不必去关系底层的文件系统…...

编程日记 2023/9/30 14:35:20

Visual Studio 2019 C# winform CefSharp 中播放视频及全屏播放

VS C# winform CefSharp 浏览器控件&#xff0c;默认不支持视频播放&#xff0c;好在有大佬魔改了dll&#xff0c;支持流媒体视频播放。虽然找了很久&#xff0c;好歹还是找到了一个版本100.0.230的dll&#xff08;资源放在文末&#xff09; 首先创建一个项目 第二、引入CefSha…...

编程日记 2023/9/30 14:34:19

天选之子Linux是如何发展起来的？为何对全球IT行业的影响如此之大？

天选之子Linux是如何发展起来的&#xff1f;为何对全球IT行业的影响如此之大&#xff1f; 前言一、UNIX发展史二、Linux发展历史三、开源四、官网五、 企业应用现状六、发行版本 前言 上面这副图是博主历时半小时完成的&#xff0c;给出了Linxu的一些发展背景。球球给位看官老…...

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

MDK报错：Undefined symbol assert_failed报错解决策略

MDK报错&#xff1a;Undefined symbol assert_failed报错解决策略 &#x1f3af;&#x1fa95;在全网搜索相关MDK编译报错:Error: L6218E: Undefined symbol assert_param (referred from xxx.o). ✨有些问题看似很简单&#xff0c;可能产生的问题是由于不经意的细节原因导致。…...

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

LLM - Make Causal Mask 构造因果关系掩码

目录 一.引言 二.make_causal_mask 1.完整代码 2.Torch.full 3.torch.view 4.torch.masked_fill_ 5.past_key_values_length 6.Test Main 三.总结 一.引言 Causal Mask 主要用于限定模型的可视范围&#xff0c;防止模型看到未来的数据。在具体应用中&#xff0c;Caus…...

编程日记 2023/9/30 14:26:11

Python函数式编程（一）概念和itertools

Python函数式编程是一种编程范式&#xff0c;它强调使用纯函数来处理数据。函数是程序的基本构建块&#xff0c;并且尽可能避免或最小化可变状态和副作用。在函数式编程中&#xff0c;函数被视为一等公民&#xff0c;可以像值一样传递和存储。 函数式编程概念 编程语言支持通…...

编程日记 2023/9/30 14:24:10

Guava限流器原理浅析

文章目录 基本知识限流器的类图使用示例 原理解析限流整体流程问题驱动1、限流器创建的时候会初始化令牌吗&#xff1f;2、令牌是如何放到桶里的&#xff1f;3、如果要获取的令牌数大于桶里的令牌数会怎么样4、令牌数量的更新会有并发问题吗 总结 实际工作中难免有限流的场景。…...

编程日记 2023/9/30 14:23:08

第四十二章 持久对象和SQL - 用于创建持久类和表的选项

文章目录 第四十二章 持久对象和SQL - 用于创建持久类和表的选项用于创建持久类和表的选项访问数据 第四十二章 持久对象和SQL - 用于创建持久类和表的选项 用于创建持久类和表的选项 要创建持久类及其对应的 SQL 表&#xff0c;可以执行以下任一操作&#xff1a; 使用 IDE …...

编程日记 2023/9/30 14:22:08

政府网站建设情况/网络外包

本文记录了mysql 8.0.15 安装配置的方法&#xff0c;供大家参考&#xff0c;具体内容如下1. MySQL安装1.1 在MySQL官网 下载 Windows 版本的 MySQL 安装包下载地址点击下载Download后会弹出以下界面&#xff0c;点击 No thanks, just start my download1.2 下载完后解压&#x…...

编程日记 2025/1/11 11:49:27

公司网站二维码怎么做的/百度seo怎么收费

Cocos2d-x 3.0新引擎目录结构2014年4月29日 Cocos2d-x 3.0学习作为一个Cocos2d-x的菜鸟&#xff0c;我倒是挺愿意关注不同版本之间的区别&#xff0c;Cocos2d-x 3.0自2013年7月份开始发布alpha0-pre版本&#xff0c;到2014年4月23日发布正式版&#xff0c;历经9个版本&#xf…...

编程日记 2025/1/11 9:42:57

做包子网站/搜索历史记录

ASP.NET笔试题是ASP.NET程序员面试必须经历的&#xff0c;一般会叫你填两个表 1个是你的详细信息表 1个是面试题答卷两个都要注意反正面是否都有内容不要遗漏&#xff0c;如果考你机试一般也有两种&#xff0c;就是程序连接数据库或一些基本的算法&#xff08;二分查找&#xf…...

编程日记 2025/1/11 8:35:21

南京政府门户网站建设问题/百度推广客服

DedeCMS的HTML更新 为了减轻网站负载&#xff0c;提高搜索引擎的友好度&#xff0c;DedeCMS大多数内容都需要生成HTML&#xff0c;一般的操作如下&#xff1a; &#xff08;推荐学习&#xff1a;dedecms教程&#xff09; 1、发布内容(发布时会直接生成文档的HTML) 2、更新内…...

编程日记 2025/1/11 4:49:32

网站建设公司哪个好/百度一下你知道主页官网

文章与教程 Planning Android Screens (slides.com) Dmytro Danylyk的演讲幻灯片&#xff0c;关于程序员和设计师如何一起设计一款新的app。 我在Droidcon London上做的事情(medium.com) Joe Birch概括了他在Droidcon London上的经历。 掌握Coordinator Layout (saulmm.gith…...

编程日记 2025/1/11 4:45:30

建设网站的企业邮箱网站建设服务/新闻头条 今天

HTML5提供了许多新接口&#xff0c;其中最令人振奋的无疑是Websocket。正是它的存在令网络双向交互得以实现。使用Websocket对于客户端来说无疑十分简单。websocket提供了三个简单的函数&#xff0c;onopen,onclose以及onmessage&#xff0c;顾名思义&#xff0c;他们分别监听s…...

编程日记 2025/1/11 4:30:25