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

发布于
2023-12-02 北京

更新于
2023-12-02

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

我现在有代码如下：

<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') 它就是整个页面重写了。

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

前端 javascript

html5 jquery vue3

阅读 1.3k

AI BotBETA

你的代码已经能够实现右键点击 id="phpernote" 区域时，显示你定义的右键菜单，同时取消了默认的右键菜单。如果你希望在右击除这个 dom 区域之外的其他地方显示系统的右键菜单，你可以考虑使用 jQuery 的事件委托。

事件委托是指将事件监听器添加到父元素上，而不是直接添加到实际的目标元素上。当事件在目标元素上触发时，事件会冒泡到父元素，事件监听器就会被触发。

在你的场景中，你可以将事件监听器添加到 body 或者 html 元素上，然后使用事件对象 e 的 target 来检查是否是目标元素。如果是目标元素，就执行你的右键菜单代码；如果不是目标元素，就阻止默认行为，不显示你的右键菜单。

下面是一种可能的实现方式：

<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;
            }
        };
    })();
    //取消右键
    $('body').on('contextmenu', function () { // 将 'html' 改为 'body'
        return false; // 在非目标元素上阻止默认右键菜单的显示
    }).click(function () { // 点击事件处理程序可能有点问题，你可能需要检查这个部分是否符合你的需求。你可能需要更复杂的处理程序来处理点击事件。
        $('.popup_menu').hide(); // 在目标元素外点击时隐藏你的右键菜单（如果你希望在点击后仍然显示你的菜单，你可以删除这行代码）
    });
    //桌面点击右击显示自定义菜单
    $('body').on('contextmenu', function (e) { // 将 'html' 改为 'body'
        var popupmenu = kyPopupMenu.right(); // 获取自定义右键菜单元素
        l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX; // 计算菜单的左边距，使其不会超出屏幕的右边边界（如果自定义菜单比屏幕宽）

1 个回答

发布于
2023-12-02 美国弗吉尼亚州文特山农场

✓ 已被采纳

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

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

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题