"## 如何给页面添加追加右键菜单
在前端开发中，我们经常需要对页面进行定制化的操作，其中之一就是添加追加右键菜单的功能。本文将介绍如何实现这一功能，同时保持原有的右键菜单功能不变。
首先，在 HTML 文件中添加一个隐藏的菜单元素，用于承载我们自定义的右键菜单。可以使用 <div> 元素来实现，给它一个唯一的 id，并设置 display: none 属性来隐藏它。
<div id=\"customContextMenu\" style=\"display:none\"></div>
然后，在 JavaScript 文件中编写代码来实现右键菜单的追加功能。我们需要监听页面的右键菜单事件，并在事件触发时显示我们自定义的菜单。
document.addEventListener(\"contextmenu\", function(event) {
event.preventDefault(); // 阻止默认的右键菜单
const customMenu = document.getElementById(\"customContextMenu\");
customMenu.style.display = \"block\";
customMenu.style.top = event.clientY + \"px\";
customMenu.style.left = event.clientX + \"px\";
});
上述代码中，我们使用 addEventListener 方法监听了页面的 contextmenu 事件，当事件触发时，我们首先使用 preventDefault 方法阻止默认的右键菜单弹出，然后获取到我们的自定义菜单元素，并将其显示出来。我们还根据鼠标点击位置设置了菜单的位置，使其出现在鼠标点击处。
最后，我们需要编写代码来处理自定义菜单中的选项被点击时的操作。可以为菜单选项添加相应的事件监听器，并在事件触发时执行相应的操作。
const menuItem1 = document.getElementById(\"menuItem1\");
const menuItem2 = document.getElementById(\"menuItem2\");
menuItem1.addEventListener(\"click\", function() {
// 菜单选项1的操作
});
menuItem2.addEventListener(\"click\", function() {
// 菜单选项2的操作
});
上述代码中，我们获取到自定义菜单中的每个选项元素，并为它们添加了 click 事件监听器。当菜单选项被点击时，相应的操作可以在监听器中编写。
通过以上步骤，我们就成功地给页面添加了追加右键菜单的功能，同时保持了原有的右键菜单功能不变。你可以根据自己的需求，定制化菜单的样式和功能。
注意：在实际开发中，你可能需要使用 CSS 来美化自定义菜单的样式，并添加更多的菜单选项和功能。以上代码仅为示例，具体的实现方式取决于你的项目需求。
希望本文能帮助你实现页面追加右键菜单的功能，祝你的前端开发工作顺利！"
