jquery右键菜单

jQuery 实现右键菜单

使用 jQuery 实现右键菜单可以通过监听 contextmenu 事件，并阻止默认行为，然后显示自定义菜单。

HTML 结构

<div id="custom-context-menu" style="display: none; position: absolute;">
    <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>

jQuery 代码

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

    // 监听右键点击事件
    $(document).on("mousedown", function(e) {
        if (e.button === 2) { // 右键点击
            $("#custom-context-menu")
                .css({
                    left: e.pageX + "px",
                    top: e.pageY + "px"
                })
                .show();
        } else {
            $("#custom-context-menu").hide();
        }
    });

    // 点击菜单项时隐藏菜单
    $(".menu-item").on("click", function() {
        $("#custom-context-menu").hide();
    });

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

使用 jQuery 插件简化实现

如果需要更复杂的功能，可以使用现成的 jQuery 插件，如 jQuery ContextMenu 或 jQuery Right Click。

示例：使用 jQuery ContextMenu 插件

<!-- 引入插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">

<!-- 定义菜单 -->
<div class="context-menu" data-target="target-element">
    <ul>
        <li data-action="action1">选项1</li>
        <li data-action="action2">选项2</li>
    </ul>
</div>

<script>
$(function() {
    $.contextMenu({
        selector: ".target-element", // 触发右键菜单的元素
        items: {
            action1: { name: "选项1", callback: function() { alert("选项1被点击"); } },
            action2: { name: "选项2", callback: function() { alert("选项2被点击"); } }
        }
    });
});
</script>

自定义样式与功能

可以通过 CSS 自定义右键菜单的外观，并通过 jQuery 扩展功能。

CSS 样式

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

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

#custom-context-menu li a {
    display: block;
    padding: 5px 15px;
    text-decoration: none;
    color: #333;
}

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

扩展功能

// 动态添加菜单项
$("#custom-context-menu ul").append('<li><a href="#" class="menu-item">动态选项</a></li>');

// 根据条件显示不同菜单
$(document).on("mousedown", function(e) {
    if (e.button === 2) {
        if ($(e.target).hasClass("special-element")) {
            $("#custom-context-menu").find(".menu-item").text("特殊选项");
        }
    }
});

通过以上方法，可以灵活实现 jQuery 右键菜单功能。