js contextmenu

// 示例代码：使用 JavaScript 创建自定义右键菜单 (contextmenu)

// HTML 部分
<div id="content" style="width: 200px; height: 200px; background-color: lightblue;">
    右键点击这里
</div>
<div id="contextMenu" style="display: none; position: absolute; background-color: white; border: 1px solid black;">
    <ul>
        <li onclick="alert('Option 1 selected')">选项 1</li>
        <li onclick="alert('Option 2 selected')">选项 2</li>
        <li onclick="alert('Option 3 selected')">选项 3</li>
    </ul>
</div>

// JavaScript 部分
document.getElementById('content').addEventListener('contextmenu', function(event) {
    event.preventDefault(); // 阻止默认的右键菜单

    var menu = document.getElementById('contextMenu');
    menu.style.display = 'block';
    menu.style.left = event.pageX + 'px';
    menu.style.top = event.pageY + 'px';
});

document.addEventListener('click', function() {
    document.getElementById('contextMenu').style.display = 'none'; // 点击其他地方时隐藏菜单
});

解释说明：

1. HTML 部分:

   • #content 是一个可右键点击的区域。
   • #contextMenu 是自定义的右键菜单，初始状态下是隐藏的 (display: none)。

2. JavaScript 部分:

   • 监听 #content 上的 contextmenu 事件（即右键点击），阻止默认的浏览器右键菜单，并显示自定义菜单。
   • 自定义菜单会根据鼠标点击的位置 (event.pageX 和 event.pageY) 进行定位。
   • 监听整个文档的点击事件，当点击其他地方时，隐藏自定义菜单。