当前位置：首页 > jquery

jquery右键菜单

2026-04-08 13:52:39jquery

jQuery 右键菜单实现方法

使用 jQuery 创建右键菜单可以通过监听 contextmenu 事件，并阻止默认行为来实现。以下是具体方法：

引入 jQuery 库 确保页面中已加载 jQuery 库，可以通过 CDN 引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

HTML 结构 创建一个简单的右键菜单结构：

jquery右键菜单

<div id="custom-context-menu" class="hidden">
    <ul>
        <li><a href="#" class="menu-item">选项1</a></li>
        <li><a href="#" class="menu-item">选项2</a></li>
        <li><a href="#" class="menu-item">选项3</a></li>
    </ul>
</div>

CSS 样式 为右键菜单添加基本样式：

.hidden {
    display: none;
}

#custom-context-menu {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
}

#custom-context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#custom-context-menu li {
    padding: 8px 15px;
    cursor: pointer;
}

#custom-context-menu li:hover {
    background: #f0f0f0;
}

jQuery 代码 实现右键菜单的显示、隐藏和定位功能：

jquery右键菜单

$(document).ready(function() {
    // 阻止默认右键菜单
    $(document).on("contextmenu", function(e) {
        e.preventDefault();
    });

    // 显示自定义右键菜单
    $(document).on("mousedown", function(e) {
        if (e.button === 2) { // 右键点击
            $("#custom-context-menu")
                .removeClass("hidden")
                .css({
                    left: e.pageX + "px",
                    top: e.pageY + "px"
                });
        }
    });

    // 点击其他地方隐藏菜单
    $(document).on("click", function() {
        $("#custom-context-menu").addClass("hidden");
    });

    // 菜单项点击事件
    $(".menu-item").on("click", function(e) {
        e.preventDefault();
        alert($(this).text() + " 被点击");
        $("#custom-context-menu").addClass("hidden");
    });
});

使用 jQuery 插件实现

如果不想手动实现，可以使用现成的 jQuery 右键菜单插件，如 jQuery contextMenu：

安装插件

<link rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.min.css">
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.min.js"></script>
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js"></script>

初始化菜单

$.contextMenu({
    selector: "body", 
    items: {
        item1: {
            name: "选项1",
            callback: function() {
                alert("选项1被点击");
            }
        },
        item2: {
            name: "选项2",
            callback: function() {
                alert("选项2被点击");
            }
        }
    }
});