js 屏鼠标实现鼠标右键菜单

在JavaScript中实现自定义鼠标右键菜单，通常涉及以下几个步骤：

基础概念

事件监听：使用contextmenu事件监听鼠标右键点击。
阻止默认行为：通过event.preventDefault()阻止浏览器默认的右键菜单弹出。
显示自定义菜单：在右键点击的位置显示自定义的HTML元素作为菜单。
隐藏菜单：在点击其他地方时隐藏自定义菜单。

类型

静态菜单：固定位置的菜单。
动态菜单：根据不同上下文显示不同的菜单项。

应用场景

网页应用：如图片编辑器、文本编辑器等需要自定义右键菜单的应用。
管理后台：提供更便捷的操作选项。

实现示例

以下是一个简单的自定义右键菜单的实现示例：

<!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>
        #customMenu {
            position: absolute;
            display: none;
            background-color: white;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 10px #aaa;
            z-index: 1000;
        }
        #customMenu ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        #customMenu ul li {
            padding: 8px 12px;
            cursor: pointer;
        }
        #customMenu ul li:hover {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <div id="customMenu">
        <ul>
            <li onclick="handleMenuItemClick('Option 1')">Option 1</li>
            <li onclick="handleMenuItemClick('Option 2')">Option 2</li>
            <li onclick="handleMenuItemClick('Option 3')">Option 3</li>
        </ul>
    </div>

    <script>
        document.addEventListener('contextmenu', function(event) {
            event.preventDefault();
            const customMenu = document.getElementById('customMenu');
            customMenu.style.left = `${event.pageX}px`;
            customMenu.style.top = `${event.pageY}px`;
            customMenu.style.display = 'block';
        });

        document.addEventListener('click', function() {
            const customMenu = document.getElementById('customMenu');
            customMenu.style.display = 'none';
        });

        function handleMenuItemClick(option) {
            alert(`You clicked on ${option}`);
        }
    </script>
</body>
</html>