如何自定义 Chrome 右键菜单
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何自定义 Chrome 右键菜单相关的知识，希望对你有一定的参考价值。
可以安装Chrome 右键菜单插件 Context Menus 来实现给 Chrome 自定义右键菜单的功能。 参考技术A chrome右键有翻译快捷键啊，或者安装插件也可以实现即时快捷翻译。 参考技术B 可以安装此插件https://chrome.google.com/webstore/detail/google%E7%BF%BB%E8%AF%91%E4%B8%AD%E8%8B%B1%E6%96%87/nehpphcgppmiinlfceebcgikcpcjnbnl不过有时候会抽风，无缘无故会变没，得重新安装
自定义右键菜单
在自定义右键菜单前，我们先了解一下事件默认行为：
事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情；
怎么阻止？
当前这个行为是什么事件触发的，然后在这个事件的处理函数中使用return false;
//oncontextmenu : 右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发
document.oncontextmenu = function() {
return false;
}
示例：
1.样式：
#div1 {width:100px; height: 200px; border: 1px solid red; position: absolute; display: none;}
2.结构：
<body>
<div id="div1"></div>
</body>
3.逻辑
<script>
window.onload = function() {
var oDiv = document.getElementById(‘div1‘);
document.oncontextmenu = function(ev) { //右键菜单事件
var ev = ev || event;
oDiv.style.display = ‘block‘;
oDiv.style.left = ev.clientX + ‘px‘; // ev.clientX鼠标的横向距离
oDiv.style.top = ev.clientY + ‘px‘; // ev.clientY鼠标的纵向距离
return false;
}
document.onclick = function() {
oDiv.style.display = ‘none‘;
}
}
</script>
分享技术，分享快乐！
以上是关于如何自定义 Chrome 右键菜单的主要内容，如果未能解决你的问题，请参考以下文章