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

今天药忘吃喽~ 2022-01-16 08:11 398阅读 0赞

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70]: /images/20220114/be2f106464b94c6090770297aac3b1c0.png