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

首先是弹窗元素

<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'; // 隐藏弹窗
    }
});

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Open3D Ransac点云配准算法(粗配准)

目录 一、概述 1.1简介 1.2RANSAC在点云粗配准中的应用步骤 二、代码实现 2.1关键函数 2.2完整代码 2.3代码解析 2.3.1计算FPFH 1. 法线估计 2. 计算FPFH特征 2.3.2 全局配准 1.函数&#xff1a;execute_global_registration 2.距离阈值 3.registration_ransac_b…

二维码中的文件如何列表排列?轻松在线做文件活码的简单技巧

现在二维码是常用来展示文件的手段之一&#xff0c;将文件生成二维码之后扫码就能够快速在手机上查看文件内容&#xff0c;减少了下载内存占用及传输的时间&#xff0c;通过这种方式可以更加方便快捷的获取文件内容。怎么把多个文件用列表的方式来扫码展示呢&#xff1f; 多个…

汽车电子行业知识:什么是电子后视镜

文章目录 1.什么是电子后视镜2.有哪些汽车用到了电子后视镜3.电子后视镜的原理及算法4.电子后视镜的优点5.电子后视镜的未来市场将继续增长 1.什么是电子后视镜 电子后视镜是一种集成了电子元件和显示屏的汽车后视镜&#xff0c;用于替代传统的机械后视镜。它通过内置的摄像头捕…

[吃瓜教程]南瓜书第4章决策树

1.决策树的算法原理 从逻辑角度&#xff0c;条件判断语句的组合&#xff1b;从几何角度&#xff0c;根据某种准则划分特征空间&#xff1b; 是一种分治的思想&#xff0c;其最终目的是将样本约分约纯&#xff0c;而划分的核心是在条件的选择或者说是**特征空间的划分标准 ** …

编写一个程序,实现字符串大小写的转换并倒序输出。

编写一个程序,实现字符串大小写的转换并倒序输出。要求如下: &#xff08;1&#xff09;使用for循环将字符串“ITcastHeiMa”从最后一个字符开始遍历。 &#xff08;2&#xff09;遍历的当前字符如果是大写字符&#xff0c;就使用toLowerCase()方法将其转换为小写字符&#xff…

2024-07-01_外语学习

文章目录 前言1、Los Angeles至于单个los 是什么意思&#xff1f;我们可以逐词翻译这个西班牙语句子 2. Extraneous non-props attributes (style) were passed to component but could not be automatically inherited because component renders fragment or text root nodes…

鸿蒙3.0WebView网络错误问题

背景&#xff0c;荣耀9x&#xff0c;混淆才会出这个问题。 [ERROR:ssl_client_socket_impl.cc(981)] handshake failed; returned -1, SSL error code 1, net_error -2 NetError.java int SSLClientSocketImpl::DoHandshake() {crypto::OpenSSLErrStackTracer err_tracer(FRO…

【深入浅出 】——【Python 字典】——【详解】

目录 1. 什么是 Python 字典&#xff1f; 1.1 字典的基本概念 1.2 字典的用途 1.3 字典的优势 2. 字典的基本特点 2.1 键的唯一性 2.2 可变性 2.3 无序性 3. 如何创建字典&#xff1f; 3.1 使用 {} 符号 3.2 使用 dict() 工厂方法 3.3 使用 fromkeys() 方法 4. 字…

优盘有盘符显示0字节:故障解析与数据恢复策略

一、优盘有盘符显示0字节现象描述 在使用优盘的过程中&#xff0c;我们有时会遇到一种令人困惑的情况&#xff1a;插入优盘后&#xff0c;电脑能正常识别到优盘的盘符&#xff0c;但当我们尝试访问其中的数据时&#xff0c;却发现优盘的容量显示为0字节&#xff0c;无法读取或…

武汉星起航:自运营团队精准把握亚马逊红利,引领跨境电商新潮流

在全球化的浪潮下&#xff0c;跨境电商行业蓬勃发展&#xff0c;为众多企业带来了前所未有的机遇。武汉星起航电子商务有限公司便是其中的佼佼者&#xff0c;其自运营团队凭借对亚马逊平台的深入了解和丰富的运营经验&#xff0c;成功抓住了亚马逊的流量红利&#xff0c;为公司…

[leetcode]squares-of-a-sorted-array. 有序数组的平方

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:vector<int> sortedSquares(vector<int>& nums) {int n nums.size();vector<int> ans(n);for (int i 0, j n - 1, pos n - 1; i < j;) {if (nums[i] * nums[i] > nums[j] *…

asp.net的承载环境的配置与应用

[S1513]基于环境变量的配置初始化 应用启动的时候会将当前的环境变量作为配置源来创建承载最初配置数据的IConfiguration对象&#xff0c;但它只会选择名称以“ASPNETCORE_”为前缀的环境变量&#xff08;通过静态类型Host的CreateDefaultBuilder方法创建的HostBuilder默认选择…

Es结合springboot(笔记回忆)

导包 <!--导入es--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId> </dependency> <dependency><groupId>org.springframework.boot<…

换天空背景的软件有哪些?摄影师必备,让背景从灰暗到绚烂

在摄影的世界里&#xff0c;背景往往能够为照片增添一种难以言喻的情感色彩。 有时&#xff0c;一个简单的天空背景更换&#xff0c;就能让整张照片焕发出全新的生命力&#xff0c;表达出摄影师想要传达的情感和故事。 如今&#xff0c;随着科技的发展&#xff0c;一些换天空…

操作系统真象还原:进一步完善内核

第12章-进一步完善内核 12.1 Linux系统调用浅析 系统调用就是让用户进程申请操作系统的帮助&#xff0c;让操作系统帮其完成某项工作&#xff0c;也就是相当于用户进程调用了操作系统的功能&#xff0c;因此“系统调用”准确地来说应该被称为“操作系统功能调用”。 Linux 系…

【必看】卖惨营销

经常卖惨的人到底是什么心理&#xff1f; Berry Ni同学说&#xff1a; 吸引别人的注意力。想要得到关注。 让你降低对他的期待。 让你能够在他做好一件小事的情况下就表扬他。 控制你对他的想法认知。 ​ 浪矢心理同学说&#xff1a; 1&#xff0c;求关注。他觉得买惨有好处&…

64.WEB渗透测试-信息收集- WAF、框架组件识别(4)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;63.WEB渗透测试-信息收集- WAF、框架组件识别&#xff08;3&#xff09;-CSDN博客 我们在…

Stable Diffusion用AI绘画古诗文视频副业项目,轻松涨粉10W+,项目拆解分享给你【附详细玩法教程】

项目介绍 古诗文自古以来就有着广泛的受众&#xff0c;特别是在短视频平台上&#xff0c;它不仅有很高的流量潜力&#xff0c;还能给观众带来美的享受和教育意义。通过使用AI绘画工具&#xff0c;创作者能够将古诗文中的场景生动地呈现出来&#xff0c;制作出有艺术性、有教育…

测评:【AI办公】版本更迭与AI加持下的最新ONLYOFFICE桌面编辑器8.1

你是否还在为没有一款合适的在线桌面编辑器而苦恼&#xff1f;你是否还在因为办公软件的选择过少而只能使用WPS或者office&#xff1f;随着办公需求的不断变化和发展&#xff0c;办公软件也在不断更新和改进。ONLYOFFICE 作为一款全功能办公软件&#xff0c;一直致力于为用户提…