JS右键|极客笔记

JS右键

在网页开发中，右键菜单通常是指用户右击鼠标时弹出的菜单选项。在很多网页应用中，我们可以通过JavaScript来自定义右键菜单，以提供更好的用户体验。本文将详细介绍如何使用JavaScript来实现右键菜单功能。

原生右键菜单

首先，让我们看一下浏览器默认的右键菜单。在网页中任意位置右击鼠标，会弹出一个包含常见功能选项的默认菜单，如“在新标签页中打开链接”、“复制”、“粘贴”等。

自定义右键菜单

我们可以通过JavaScript代码来自定义右键菜单，以满足特定的需求。下面是一个简单的示例代码，用于在用户右击时弹出一个自定义的菜单：

<!DOCTYPE html>
<html>
<head>
    <title>Custom Context Menu</title>
    <style>
        .context-menu {
            display: none;
            position: absolute;
            background: #f9f9f9;
            border: 1px solid #ccc;
            padding: 5px;
        }
        .context-menu li {
            cursor: pointer;
            list-style: none;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div class="context-menu">
        <ul>
            <li onclick="alert('You clicked Option 1')">Option 1</li>
            <li onclick="alert('You clicked Option 2')">Option 2</li>
            <li onclick="alert('You clicked Option 3')">Option 3</li>
        </ul>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const contextMenu = document.querySelector(".context-menu");

            window.addEventListener("contextmenu", function(event) {
                event.preventDefault();

                contextMenu.style.left = event.pageX + "px";
                contextMenu.style.top = event.pageY + "px";
                contextMenu.style.display = "block";
            });

            window.addEventListener("click", function() {
                contextMenu.style.display = "none";
            });
        });
    </script>
</body>
</html>

在上面的示例代码中，我们创建了一个包含三个选项的自定义右键菜单。当用户右击时，菜单会显示在鼠标位置，当用户点击其他地方时，菜单会隐藏起来。