在右键菜单中添加自定义事件

一、覆盖默认右键菜单的方式

        出于安全和用户体验的考虑,不允许直接修改或向默认的右键菜单(浏览器的上下文菜单)添加自定义项。因为允许网页脚本更改或扩展默认的上下文菜单可能会造成用户困惑,并有可能被恶意网站利用来进行钓鱼或其他不良行为。所以一般的右键菜单都是自定义的,会在监听事件中添加阻止默认事件event.preventDefault()。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Context Menu</title>
<style>/* 样式自定义右键菜单 */.custom-context-menu {display: none;position: absolute;z-index: 10;background-color: #ffffff;border: 1px solid #ddd;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}.custom-context-menu ul {list-style: none;margin: 0;padding: 10px 0;}.custom-context-menu ul li {padding: 8px 16px;cursor: pointer;}.custom-context-menu ul li:hover {background-color: #f7f7f7;}
</style>
</head>
<body>
<div id="context-area">Right click me!</div><div class="custom-context-menu" id="customContextMenu"><ul><li>Custom Action 1</li><li>Custom Action 2</li><li>Custom Action 3</li></ul>
</div><script>const contextArea = document.getElementById('context-area');const customContextMenu = document.getElementById('customContextMenu');contextArea.addEventListener('contextmenu', function(event) {event.preventDefault(); // 阻止默认的右键菜单// 设置自定义菜单的位置customContextMenu.style.top = `${event.clientY}px`;customContextMenu.style.left = `${event.clientX}px`;// 显示自定义菜单customContextMenu.style.display = 'block';// 点击自定义菜单的事件监听customContextMenu.addEventListener('click', function(e) {// 这里处理你的自定义菜单项被点击的逻辑// e.target 可以获取到被点击的元素console.log('Custom menu item clicked', e.target.textContent);});// 点击其他地方隐藏自定义菜单document.addEventListener('click', function(event) {if (event.button !== 2) { // 只在不是鼠标右键的情况下隐藏菜单customContextMenu.style.display = 'none';}}, { once: true }); // 使用{ once: true }这个事件将在触发一次后被自动移除});
</script>
</body>
</html>

二、使用插件的方式在默认右键菜单添加自定义事件

        如果真的需要在默认右键菜单中添加自定义事件,可以通过浏览器扩展程序来实现,这些扩展程序可以使用特殊的API来向浏览器的上下文菜单中添加自定义项。这样做需要用户明确安装这个扩展程序,并授予它修改上下文菜单的权限。扩展程序有更多的权限来与浏览器的一些内置功能交互,包括修改上下文菜单。官网参考例子:https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/api-samples/contextMenus/basic/sample.js

1. 首先需要在 manifest中添加对应的 contextMenus 权限

{"name": "自定义右键菜单项","description": "Uses the chrome.contextMenus API to customize the context menu.","version": "0.7","permissions": ["contextMenus"],"background": {"service_worker": "background.js"},"content_scripts": [{"matches": ["<all_urls>"],"js": ["content_script.js"]}],"manifest_version": 3
}

2. 然后background.js中添加监听

// 监听菜单项点击事件
chrome.contextMenus.onClicked.addListener((info, tab) => {// 可以通过 sendMessage 将信息发送到content_script.js处理 或 在此处处理chrome.tabs.sendMessage(tab.id, { message: 'Custom ContextMenus Action', menuItemId: info.menuItemId, selectedText: info.selectionText});
});chrome.runtime.onInstalled.addListener(function() {chrome.contextMenus.create({"id": "zh_translate","title": "翻译成中文","contexts": ["selection"]  // all 右键菜单都会显示,page 仅页面菜单会显示,selection 仅选中文本右键菜单显示,link 链接右键菜单显示,image 图片右键菜单显示,audio 音频,video视频,editable编辑});chrome.contextMenus.create({"id": "en_translate","title": "翻译成英文","contexts": ["selection"]});
});

3. 在content_script.js接收数据

chrome.runtime.onMessage.addListener((request, sender, sendResponse) =>{if (request.message === "Custom ContextMenus Action") {console.log(request)}
});

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

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

相关文章

嵌入式开发为什么需要输出调试信息?

嵌入式开发为什么需要输出调试信息&#xff1f; 因为输出调试信息是嵌入式开发中一项非常重要的实践&#xff0c;它有助于保证软件的可靠性、稳定性和性能&#xff0c;也是故障排查的关键工具之一。 嵌入式开发输出调试信息主要有以下作用&#xff1a; 1.错误排查与问题定位 输…

卓越进行时 | 西安交通大学校友莅临赛宁网安参观考察

近日&#xff0c;为了深入贯彻网络安全强国战略建设&#xff0c;积极发挥网络安全企业的先进作用&#xff0c;推动校企合作与协作共赢。西安交通大学领导携校友会来到赛宁网安网络安全卓越中心进行参观考察&#xff0c;为进一步的校企合作和产业孵化奠定基础。 活动期间&#…

docker安装Sentinel zipkin

文章目录 引言I Sentinel安装1.1 运行容器1.2 DOCKERFILE 参考1.3 pom 依赖1.4 .yml配置(整合springboot)II 资源保护2.1 Feign整合Sentinel2.2 CommonExceptionAdvice:限流异常处理类III zipkin引言 消息服务和请求第三方服务可不配置Sentinel。 I Sentinel安装 Sentinel …

list简单使用

目录 介绍 头文件 简单使用 Member functions Constructor operator ​编辑 Iterators Capacity empty size Element access: front/back Modifiers push_front pop_front push_back pop_back insert erase swap resize clear Operations remove uniq…

关于网站的favicon.ico图标的设置需要注意的几点

01-必须在网页的head标签中放上对icon图标的说明语句&#xff1a; 比如下面这样的语句&#xff1a; <link rel"shortcut icon" href"/favicon.ico">否则&#xff0c;浏览器虽然能读到图标&#xff0c;但是不会把图标显示在标签上。 02-为了和本地开…

从 0 搭建 Vite 3 + Vue 3 Js版 前端工程化项目

之前分享过一篇vue3+ts+vite构建工程化项目的文章,针对小的开发团队追求开发速度,不想使用ts想继续使用js,所以就记录一下从0搭建一个vite+vue3+js的前端项目,做记录分享。 技术栈 Vite 3 - 构建工具 Vue 3 Vue Router - 官方路由管理器 Pinia - Vue Store你也可以选择vue…

九、LuaTable(表)

文章目录 一、定义二、Table(表)的构造三、Table 操作&#xff08;一&#xff09;Table连接&#xff08;二&#xff09;插入和移除&#xff08;三&#xff09;Table 排序&#xff08;四&#xff09;Table 最大值 一、定义 table 是 Lua 的一种数据结构用来帮助我们创建不同的数…

基于SSM的教室信息管理系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SSM的教室信息管理系统,java项目。 …

Unity中Shader的BRDF解析(三)

文章目录 前言一、BRDF中的镜面反射项二、分别解析每一个参数1、D、G函数&#xff1a;speclarTerm2、其他中间步骤3、光照颜色4、F函数&#xff08;菲涅尔函数&#xff09; &#xff1a;FresnelTermIBL在下篇文章中继续解析 三、最终代码.cginc文件:Shader文件&#xff1a; 前言…

贪心 376. 摆动序列

376. 摆动序列 题目&#xff1a; 连续数字&#xff08;前减后&#xff09;的差严格在正负之间交替&#xff0c;差值不能有0为摆动序列。 [1,7,4,9,2,5] 是一个摆动序列&#xff0c;因为差值 (6,-3,5,-7,3) 是正负交替出现的 给定一个整数序列&#xff0c;返回作为摆动序列…

Docker监控Weave Scope的安装和使用

1.本地安装Weave Scope 1&#xff09;创建文件夹。 mkdir /usr/local/bin/scope 2&#xff09;从本地上传文件。 rz scope.bin以资源形式已上传到文章开篇。 3&#xff09;修改scope.bin文件为可执行文件。 chmod 755 /usr/local/bin/scope/scope.bin 4&#xff09;执行sco…

AntDB数据库:从海量数据处理,到5G计费商用核心

AntDB数据库自2008年研发面世以来&#xff0c;首先被应用于运营商的核心系统&#xff0c;满足运营商海量数据处理的需求。随着数字科技的不断发展&#xff0c;AntDB也在不断地更新迭代&#xff0c;逐渐地为更多行业与客户提供更全面的服务。5G时代来临&#xff0c;AntDB抓住发展…

《微信小程序开发从入门到实战》学习三十六

4.2 云开发JSON数据库 4.2.6 云开发JSON数据库 在集合对象上调用add方法可以在集和中可以插入一条记录&#xff0c;代码如下&#xff1a; db.collection(testOne).add({ // 在JSON数据库的testOne集合中增加一个记录 data:{ name: "write paper" }, // 插入数据成功…

华住三季报:韧性增长超预期,夯实可持续发展底座

美股研究社获悉&#xff0c;2023年11月27日&#xff0c;华住集团2023年第三季度业绩发布会在线上举行。受华住三季度财报向好表现&#xff0c;多家证券公司给予买入评级。中信证券认为&#xff0c;本季度华住集团国内外RevPAR修复优于前期指引上限、净开店数优于预期。且华住集…

如何手工获取并更新ESXi中macOS的VMware Tools版本

正文共&#xff1a;1128 字 22 图&#xff0c;预估阅读时间&#xff1a;1 分钟 前面我们介绍了如何在VMware ESXi创建macOS虚拟机&#xff08;VMware ESXI部署macOS Monterey&#xff09;&#xff0c;也大概介绍了如何安装VMware Tools&#xff0c;因为VMware Tools可以提供对虚…

一名技术Leader应该是创作者

今天看了一本书叫做《黑客与画家》。它里面提到一个很重要的概念就是黑客&#xff08;优秀的程序员&#xff09;是一名建筑师&#xff0c;而不是一名工程师。 传统的主管和互联网的Leader 这两者有什么区别呢&#xff1f;关键点在于建筑师是思考做什么&#xff0c;而工程师是…

超实用电脑技巧分享,快速提高工作效率!

“我是个刚开始学习使用电脑的新手&#xff0c;想问问大家有什么比较好用的电脑使用技巧可以推荐一下吗&#xff1f;非常感谢&#xff01;” 在使用电脑时&#xff0c;如果我们适当掌握一些技巧&#xff0c;可以有效提高效率。那么&#xff0c;今天小编就给大家分享一些常见的电…

前五年—中国十大科技进展新闻(2012年—2017年)

前五年—中国十大科技进展新闻&#xff08;2012-2017&#xff09; 2017年中国十大科技进展新闻1. 我国科学家利用化学物质合成完整活性染色体2. 国产水下滑翔机下潜6329米刷新世界纪录3. 世界首台超越早期经典计算机的光量子计算机诞生4. 国产大型客机C919首飞5. 我国首次海域天…

新手怎样用云服务器搭建跨境电商网站?

随着互联网的发展&#xff0c;需要用到服务器的行业越来越多&#xff0c;像是跨境电商行业更是必不可少&#xff0c;这里主要讲讲如何使用云服务器创建一个跨境电子商务网站。 准备工作&#xff1a;准备一台云服务器&#xff0c;并安装宝塔面板&#xff0c;配置好搭建网站所需…

leetcode:用栈实现队列(先进先出)

题目描述 题目链接&#xff1a;232. 用栈实现队列 - 力扣&#xff08;LeetCode&#xff09; 题目分析 我们先把之前写的数组栈的实现代码搬过来 用栈实现队列最主要的是实现队列先进先出的特点&#xff0c;而栈的特点是后进先出&#xff0c;那么我们可以用两个栈来实现&…