js jquery 如何实现右键点击具体的 dom 元素，然后重写系统的右键菜单？

站长

2024年06月24日 08:47 · 阅读数 5

我现在有代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <title>jQuery制作Web页面鼠标右键美化菜单</title>
    <style type="text/css">
        body{ position:relative;}
        ul, li{ margin:0; padding:0; list-style:none; font-size:12px;}
        .split{border-bottom:1px solid gray;}
        .popup_menu{position:absolute; z-index:90; border:1px solid #AEAEAE; padding:2px; width:120px;border-radius:2px;}
        .popup_menu a{ display:block; color:#325B8E; text-indent:12px; text-decoration:none; height:26px; line-height:25px; padding-right:5px;}
        .popup_menu a:hover{ background:#57B4E4; color:#fff; border-radius:2px;}
    </style>
</head>
<body>
<script type="text/javascript">
    var kyPopupMenu = {};
    kyPopupMenu = (function () {
        return {
            right: function (obj) {
                $('.popup_menu').remove();
                var menu = '<div class="popup_menu app-menu"><ul><li><a url="http://www.cnblogs.com/mini-firework/">firework</a></li><li class="split"></li><li><a url="http://blog.csdn.net/e_real">疯狂的土豆专栏</a></li><li><a url="http://blog.163.com/qiuyg_yc_it/">网易博客</a></li></ul></div>';
                popupMenuApp = $(menu)
                    .find('a').attr('href', 'javascript:;')
                    .end().appendTo('body');
                //绑定事件
                $('.app-menu a').on('click', function () {
                    window.location.href = $(this).attr("url");
                });
                return popupMenuApp;
            }
        };
    })();
    //取消右键
    $('html #phpernote').on('contextmenu', function () {
        return false;
    }).click(function () {
        $('.popup_menu').hide();
    });
    //桌面点击右击
    $('html #phpernote').on('contextmenu', function (e) {
        var popupmenu = kyPopupMenu.right();
        l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
        t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
        popupmenu.css({left: l, top: t}).show();
        return false;
    });
</script>
<div id="phpernote" style="background-color:#ccc;">鼠标右击这个区域试试</div>
</body>
</html>

我希望右击 id="phpernote"这块区域的时候，改写系统的右键菜单，右击除这个 dom 区域之外的其他地方还是显示系统的右键菜单。

现在我如果把 $('html #phpernote') 改为 $('html') 它就是整个页面重写了。

通过各种引擎搜了一下，都是整个页面都实现右键菜单改写的，不是我期望的，请大佬帮忙看看如何实现，小弟跪谢。

1个回答

test

2024-06-24

你这个代码是没问题的，有问题的是你的 js 代码放倒了 HTML 代码块的上面，且没有放到 $(function(){...}) 里面，导致 JS 代码先执行了，元素还没创建，事件就没绑定到。

你只需要把 div 的代码放到 script 的前面就好了。

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容