自定义浏览器右键弹出小菜单

最新推荐文章于 2025-06-28 09:20:25 发布

原创最新推荐文章于 2025-06-28 09:20:25 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#MVC #浏览器菜单 #自定义 #获取鼠标点击位置

本文介绍如何在浏览器中自定义右键弹出菜单。开发中，有时需要根据编程需求设置个性化的菜单。文章展示了在一个置顶选项卡中，通过右键触发新增、删除等操作的自定义菜单，菜单会出现在鼠标点击的位置，并在点击其他地方时自动消失。涉及到的技术包括HTML、CSS和JavaScript，重点在于JavaScript代码实现取消浏览器默认菜单并定位自定义菜单的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发工具与关键技术： VS ，自定义浏览器右键弹出小菜单；
作者：刘佳明
撰写时间：2019年 6 月 15 日

本次小编要分享的知识内容是如何自定义浏览器右键弹出小菜单；
在编辑项目时，我们需要看到自己编程的代码的效果如何，就需要在浏览器（谷歌浏览器，搜狗浏览器，IE浏览器等等，看个人喜好）查看代码运行的效果，是否和自己预判的效果一致，出现差别，也便于修改，
一般浏览器右键都是默认弹出浏览器本身定义的一个菜单结构，我们在编程项目时，也会有需要在浏览器中我们自己定义的的一个小菜单，来实现编程的需要；
下面是本次案例右键弹出的小菜单效果截图；
在这里插入图片描述

案例中所出现的基本构造呢，是在一个top的选项卡中在置顶的选项卡中右键，弹出一个能够新增，删除，的自定义小菜单
小菜单满足的要求是在指定的’盒子’标签内，随意那个位置右键，小菜单就出现在右键点击的位置中，并且在随意点击任意位置，小菜单消失，
以下是相关HTML代码：

<div class="ooo " id="aaa">
            <div class="sss"><a href="#" onclick="btnAdd()">新增</a></div>
            <div class="sss"><a href="#">删除</a></div>
 </div>@* ============估计材料============= *@
<div class="col-12 table-responsive " id="top-b" style="display:none"
                <table id="tabStudentImport-b" layui-filter="tabStudentImport"></table>
                uewrkdtgldkvc iygih
            </div>

对应小菜单，选项卡的css样式我就不罗列出现，但是一有点两者的状态的是属于隐藏
以下是实现自定义右键菜单的js代码：

///======鼠标右键弹出菜单   试验区  开始
            document.oncontextmenu = function () {
                return false;
            }
            //按下鼠标
            //$(document).mousedown = function (e) {
            $(document).bind("contextmenu", function (e) {
                var key = e.which;//获取鼠标键位；
                //if (key == 3) {//  1  ===鼠标左键    2  =====鼠标中键    3    ====鼠标右键
                // 获取右键点击位置
                //alert("12");
                var x = e.clientX;
                var y = e.clientY;
                console.log(x, y);
                var TOP =document.getElementById("top-b");
                if (TOP.style.display!="none") {
                    $("#aaa").show().css({ left: x + 'px', top: y + 'px' });
                }
                else {
                    $("#aaa").hide();
                }      
            });
//点击随意位置，小菜单隐藏
            $(document).click(function () {
                $("#aaa").hide()
            })
            //======鼠标右键弹出菜单   试验区   结束

Js 代码的思路呢，第一步就是取消掉浏览器本身默认的一个右键菜单（或者点击右键，无反应，例如搜狗浏览器）；取消浏览器默认右键之后，获取到点击对应‘盒子’内部随意的位置，并且把我们自定义的小菜单出现在点击的位置；由于项目的需要，我们在自定义小菜单的显示前，要判断一下，对应选项卡是否显示，再来决定自定义小菜单的显示与否；