jquery 右键

jQuery 实现右键菜单

使用 jQuery 实现右键菜单需要监听 contextmenu 事件，阻止默认行为，并显示自定义菜单。

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

    // 自定义右键菜单
    $("#targetElement").on("contextmenu", function(e) {
        // 显示菜单
        $("#customMenu").css({
            display: "block",
            left: e.pageX + "px",
            top: e.pageY + "px"
        });
        return false;
    });

    // 点击其他地方隐藏菜单
    $(document).click(function() {
        $("#customMenu").hide();
    });
});

HTML 结构示例

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

<div id="targetElement" style="width: 200px; height: 200px; background: #f0f0f0;">
    右键点击这里
</div>

<ul id="customMenu" style="display: none; position: absolute; background: #fff; border: 1px solid #ccc;">
    <li><a href="#">选项 1</a></li>
    <li><a href="#">选项 2</a></li>
    <li><a href="#">选项 3</a></li>
</ul>

CSS 样式优化

为右键菜单添加一些基本样式，使其更美观。

#customMenu {
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

#customMenu li {
    padding: 8px 12px;
    cursor: pointer;
}

#customMenu li:hover {
    background: #f0f0f0;
}

#customMenu li a {
    text-decoration: none;
    color: #333;
}

动态生成菜单

如果需要根据上下文动态生成菜单内容，可以使用以下方法。

$("#targetElement").on("contextmenu", function(e) {
    var menu = $("#customMenu");
    menu.empty(); // 清空现有菜单

    // 动态添加菜单项
    menu.append('<li><a href="#">动态选项 1</a></li>');
    menu.append('<li><a href="#">动态选项 2</a></li>');

    menu.css({
        display: "block",
        left: e.pageX + "px",
        top: e.pageY + "px"
    });
    return false;
});

菜单项点击事件

为右键菜单的选项添加点击事件处理。

$("#customMenu").on("click", "li", function() {
    var text = $(this).text();
    alert("你选择了: " + text);
    $("#customMenu").hide();
});

兼容性注意事项

确保代码在多种浏览器中正常工作，尤其是阻止默认行为和事件冒泡。

$(document).on("contextmenu", "#targetElement", function(e) {
    e.preventDefault();
    e.stopPropagation();
    // 显示菜单逻辑
});

通过以上方法，可以实现一个功能完整的右键菜单，并支持动态内容和样式定制。