一、禁止默认右键菜单（`contextmenu`事件）
在 HTML 页面中，浏览器会默认显示右键菜单。如果要自定义右键菜单，首先可能需要禁止默认的右键菜单。可以通过监听`contextmenu`事件，然后调用`preventDefault`方法来实现。
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
});只对特定元素进行禁止。
const myDiv = document.getElementById("my-div");
myDiv.addEventListener("contextmenu", function (e) {
e.preventDefault();
});二、创建自定义右键菜单（HTML 和 CSS）
首先，需要创建一个自定义的右键菜单元素。通常可以使用`div`元素来构建菜单的外观，用`ul`和`li`元素来构建菜单的选项。
<div
id="custom-context-menu"
style="display:none; position:absolute; background-color:white; border:1px solid gray; padding:5px;"
>
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
</div>然后，使用 CSS 来美化这个自定义菜单，设置菜单的样式，如字体、颜色、边框等。
#custom-context-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#custom-context-menu li {
padding: 5px;
}
#custom-context-menu li:hover {
background-color: #f0f0f0;
}三、显示自定义右键菜单（JavaScript）
当用户右键点击时，除了禁止默认菜单，还需要在正确的位置显示自定义菜单。可以通过获取鼠标点击的位置坐标（`clientX`和`clientY`），然后设置自定义菜单的`left`和`right`属性来实现。
document.addEventListener("contextmenu", function (e) {
e.preventDefault();
const customMenu = document.getElementById("custom-context-menu");
customMenu.style.display = "block";
customMenu.style.left = e.clientX + "px";
customMenu.style.top = e.clientY + "px";
});四、添加菜单选项的功能
为了让自定义菜单真正有用，需要为每个菜单选项添加功能。可以通过为`li`元素添加`click`事件监听器来实现。
例如，假设选项 1 是复制，选项 2 是粘贴，选项 3 是删除，对于复制功能可以这样实现
const option1 = document.querySelector("#custom-context-menu li:first-child");
option1.addEventListener("click", function () {
// 这里可以添加复制相关的代码，比如复制选中的文本
console.log("执行复制功能");
});五、隐藏自定义右键菜单
当用户点击菜单选项或者在菜单外部点击时，需要隐藏自定义菜单。可以通过监听`click`事件，判断点击的位置是否在菜单内部，如果不在就隐藏菜单。
document.addEventListener("click", function (e) {
const customMenu = document.getElementById("custom-context-menu");
if (!customMenu.contains(e.target)) {
customMenu.style.display = "none";
}
});