vue+js实现鼠标右键页面时在鼠标位置出现弹窗

news2024/11/17 11:42:53

首先是弹窗元素

<div class="tanchuang move-win1"
       id="tanchuang1">
    <el-button>111</el-button>
  </div>

然后在需要弹窗的地方监听点击事件,可以将这个方法写在页面载入事件中

// 获取弹窗元素
var tanchuang = document.getElementById('tanchuang1');

// 右键点击事件
document.getElementById('lsb-table').addEventListener('contextmenu', function(event) {
    event.preventDefault(); // 阻止默认的右键菜单

    // 调用右键点击事件的方法
    showContextMenu(event);
});

// 显示上下文菜单
function showContextMenu(event) {
    // 设置弹窗的位置
    tanchuang.style.display = 'block';
    tanchuang.style.left = event.pageX + 'px';
    tanchuang.style.top = event.pageY + 'px';
}

// 当点击其他地方时,隐藏弹窗
document.addEventListener('click', function(event) {
    if (event.target !== tanchuang && !tanchuang.contains(event.target)) {
        tanchuang.style.display = 'none'; // 隐藏弹窗
    }
});

效果如图
在这里插入图片描述

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

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

相关文章

MySQL之高可用性(四)

高可用性 故障转移和故障恢复 冗余是很好的技术&#xff0c;但实际上只有在遇到故障需要恢复时才会用到。(见鬼&#xff0c;这可以用备份来实现)。冗余一点儿也不会增加可用性或减少宕机。在故障转移的过程中&#xff0c;高可用性是建立在冗余的基础上。当有一个组件失效&…

STM32系列-时钟系统

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 时钟的时钟源 HSI振荡器时钟HSE振荡器时钟PLL 时钟 STM32中的系统时钟可被内部高速时钟&#xff08;HSI&#xff09;&#xff0c;外部高速时钟&#xff08;HSE&#xff09;和PL…

模型部署:C++libtorch实现全连接模型10分类和卷积模型ResNet18的四分类的模型部署推理

Clibtorch实现模型部署推理 模型 全连接模型&#xff1a;公开mnist手写识别数字的十分类卷积模型&#xff1a;自行采集的鲜花四分类 部署 语言环境&#xff1a;C 对比Python python是解释性语言&#xff0c;效率很慢&#xff0c;安全性很低 系统开发一般是java、C/C&…

示例:WPF中推荐一个Diagram开源流程图控件

一、目的&#xff1a;分享一个自研的开源流程图控件 二、使用方法 1、引用Nuget包&#xff1a; 2、添加节点列表和绘图控件 <DockPanel><ItemsControl DockPanel.Dock"Left"><h:GeometryNodeData Text"节点"/></ItemsControl><…

Magic aura skill VFX(魔法光环技能)

-----魔法光环技能VFX PACK----- 我们为您提供了一种新的高质量资产。MOBA和RPG的理想选择!享受 ------------------------ --------功能---------- 18个粒子预制件 1024*1024 + 512*512效果纹理 适用于VR、PC和移动设备 包括场景 包括后处理 AAA-质量 适用于Unity 2018.3 ===…

Nature 正刊!全球200多位研究人员基于17738个森林样地数据集发现生物多样性可以防止非本地树种的入侵

本文首发于“生态学者”微信公众号&#xff01; 2023年8月23日&#xff0c;由苏黎世联邦理工学院领衔的全球超过200多位研究人员的团队首次探索了地球上哪些地区最容易受到非本地树木的入侵。这项研究以题为“Native diversity buffers against severity of non-native tree i…

安防监控视频平台LntonCVS视频监控汇聚平台视频监控系统组成部分介绍

安防视频监控平台LntonCVS以其强大的拓展性、灵活的视频能力和轻便的部署方式著称。它支持多种主流标准协议&#xff0c;如国标GB28181、RTSP/Onvif、RTMP等&#xff0c;同时也能接入厂家的私有协议和SDK&#xff0c;如海康Ehome、海大宇等设备的SDK。除了传统的安防视频监控功…

【开放词汇分割】Side Adapter Network for Open-Vocabulary Semantic Segmentation

论文链接&#xff1a;Side Adapter Network for Open-Vocabulary Semantic Segmentation 代码链接&#xff1a;https://github.com/MendelXu/SAN 作者&#xff1a;Mengde Xu,Zheng Zhang,Fangyun Wei,Han Hu,Xiang Bai 发表单位&#xff1a;华中科技大学、微软亚洲研究院 会…

CesiumJS【Basic】- #039 绘制渐变线(Entity方式)- 需要自定义着色器

文章目录 绘制渐变线(Entity方式)- 需要自定义着色器1 目标2 代码2.1 main.ts绘制渐变线(Entity方式)- 需要自定义着色器 1 目标 使用Entity方式绘制渐变线 2 代码 2.1 main.ts import * as Cesium from cesium;const viewer = new Cesium.Viewer

[工业网络][2] 安全背景知识

安全背景知识 物理、网络和人员安全 在考虑企业和工业的安全性时&#xff0c;安全从业人员传统上将自己划分为三个专业领域。我们借助于安全中经常使用的两个术语来描述这三个领域 业内人士。属于您的设施的人员&#xff0c;包括员工和受邀承包商&#xff0c;访客或交付和服…

docker部署wg-easy和firefly

Background WireGuard是一种新型的VPN协议,它通过在内核层运行,提供高效、安全、简单和现代的VPN解决方案。wg-easy是一个专为简化 WireGuard VPN配置和管理而设计的工具&#xff0c;提供了界面化的管理&#xff0c;进一步降低WireGuard 的使用门槛&#xff0c;让用户无需深入了…

【总线】AXI4第四课时:握手机制详解

大家好,欢迎来到今天的总线学习时间!如果你对电子设计、特别是FPGA和SoC设计感兴趣&#xff0c;那你绝对不能错过我们今天的主角——AXI4总线。作为ARM公司AMBA总线家族中的佼佼者&#xff0c;AXI4以其高性能和高度可扩展性&#xff0c;成为了现代电子系统中不可或缺的通信桥梁…

【大模型系列】Language-Vision Transformer(LaVIT, ICLR2024)

Title&#xff1a;Unified Language-Vision Pretraining in LLM with Dynamic Discrete Visual TokenizationPaper&#xff1a;https://arxiv.org/abs/2309.04669Github&#xff1a;https://github.com/jy0205/LaVITAuthor&#xff1a;Yang Jin&#xff0c; 北大&#xff0c;快…

谈谈创意设计中的AI、AGI、AIGC

在当今的数字化时代&#xff0c;创意设计领域正经历着前所未有的变革。随着人工智能&#xff08;AI&#xff09;、通用人工智能&#xff08;AGI&#xff09;以及人工智能生成内容&#xff08;AIGC&#xff09;的迅猛发展&#xff0c;设计师们的工作方式和创作手段都发生了深刻的…

【CSAPP】-datalab实验

实验原理与内容 本实验每位学生拿到一个datalab-handout.tar文件。学生可以通过U盘、网盘、虚拟机共享文件等方式将其导入到Unbuntu实验环境中&#xff0c;选择合适位置存放。然后在Ubuntu环境下解压。解压后&#xff0c;根据文件中的叙述和要求更改bits.c文件。本次实验的主要…

奇瑞员工控诉强制加班,加班费最多10元;高德数据被不正当抓取,一审判赔1250万元;知乎入局AI搜索;苹果手机出货量激增

一、商业圈 1.奇瑞员工控诉非法加班&#xff1a;加班费最多10元 根据脉脉平台热搜&#xff0c;近期&#xff0c;有多位网友曝奇瑞上海属地员工发起多项投诉&#xff0c;控诉奇瑞非法加班。据悉&#xff0c;奇瑞汽车正在积极准备上市中&#xff0c;若此事未得到妥善解决&#xf…

【React】上传文章封面基础实现

<Form.Item label"封面"><Form.Item name"type"><Radio.Group onChange{onTypeChange}><Radio value{1}>单图</Radio><Radio value{3}>三图</Radio><Radio value{0}>无图</Radio></Radio.Group&…

用好华为小助手,生活总能快人一步

嘿&#xff01;朋友们&#xff01;你们有没有想过&#xff0c;如果身边有一个小助手&#xff0c;他不仅聪明伶俐&#xff0c;还能在生活的方方面面给予你最贴心的关怀和帮助&#xff0c;让我们的日常生活变得更加方便和快捷&#xff0c;那该有多好&#xff01;没错&#xff0c;…

openEuler AArch64 架构 vCPU 热插拔技术内幕

OpenAtom openEuler&#xff08;简称"openEuler"&#xff09;社区引领技术浪潮&#xff0c;早在openEuler 20.09 创新版本就率先使能并对外开放了 AArch64 架构 vCPU 热插特性。时隔四年&#xff0c;openEuler 24.03 LTS 版本补充了 vCPU 热拔能力&#xff0c;vCPU 热…

MySQL学习(6):SQL语句之数据控制语言:DCL

DCL用来管理数据库用户&#xff0c;控制数据库的访问权限 1.管理用户 1.1查询用户 use mysql; select * from user; #用户信息都存放在系统数据库mysql的user表中 在user表中&#xff0c;一个用户是由用户名和主机名共同决定的&#xff0c;上图中的host一栏就是用户的主机名…