效果：

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="test/datatables/jquery-1.10.2.js"></script>

        <style>

            *{

                padding:0;

                margin:0;

            }

            .button{

                width:200px;

                height:50px;

                background:grey;

                text-align:center;

                line-height:50px;

                margin:0 auto;

                margin-top:50px;

            }

            .menu{

                padding: 1px;

                border: 1px solid #B8CBCB;

                background-color: #fff;

                -moz-box-shadow: 2px 2px 5px #666;

                -webkit-box-shadow: 2px 2px 5px #666;

                box-shadow: 2px 2px 5px #666;

                width:140px;

                position:absolute;

                display:none;

            }

            ul li{

                list-style:none;

            }

            .li_separate{

                line-height: 0;

                margin: 3px;

                border-bottom: 1px solid #B8CBCB;

                font-size: 0;

            }

            .menu_a{

                display: block;

                height: 25px;

                line-height: 24px;

                padding: 0 5px 0 25px;

                color: #000;

                font-size: 12px;

                text-decoration: none;

            }

            .menu_a:hover{

                background: #348CCC;

                color:white;

            }

        </style>

    </head>

    <body>

        <div class="button">点击</div>

        <div class="menu">

            <ul>

                <li><a href="javascript:;" class="menu_a">复制</a></li>

                <li><a href="javascript:;" class="menu_a">粘贴</a></li>

                <li class="li_separate"></li>

                <li><a href="javascript:;" class="menu_a">删除</a></li>

            </ul>

        </div>

        <script>

            //屏蔽浏览器右键菜单

            document.oncontextmenu=function(){

                return false;

            }

            $('.button').on('mousedown',function(e){

                var key=e.which;//获取鼠标键位

                if(key==3){//1：代表左键；2：代表中键；3：代表右键

                    //获取右键点击坐标

                    var x=e.clientX;

                    var y=e.clientY;

                    $('.menu').show().css({left:x,top:y});

                }

            })

            //点击任意部位隐藏

            $(document).on('click',function(){

                $('.menu').hide();

            })

        </script>

    </body>

</html>

jq自定义鼠标右键菜单的更多相关文章

  1. js自定义鼠标右键菜单

    document.oncontextmenu = function(e) { return false; } document.onmousedown = function(e) { switch(e ...

  2. JavaScript自定义鼠标右键菜单

    下面为JavaScript代码 window.onload = function () { //好友列表 var f = 0; //判断指定id的元素在页面中是否存在 if (document.get ...

  3. JQuery模拟网页中自定义鼠标右键菜单

    题外话.......最近在开发一个网站项目的时候,需要用到网页自定义右键菜单,在网上看了各路前辈大神的操作,头晕目眩,为了达到目的,突然灵机一动,于是便有了这篇文章. 先放个效果图(沾沾自喜,大神勿喷 ...

  4. Win10 自定义鼠标右键菜单

    1. 点击文件鼠标右键显示软件 1.1 步骤 win+R输入regedit进入注册表 定位到HKEY_CLASSES_ROOT\*\shell下 在shell创建一个你想要的右键文件 例如:Kinok ...

  5. Win7如何自定义鼠标右键菜单 添加用记事本打开

    鼠标右键用记事本打开.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\Notepad] @="用记事本 ...

  6. Win7如何自定义鼠标右键菜单 添加新建WORD文档

    鼠标右键添加新建WORD文档.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.doc] @="Word.Docume ...

  7. Win7如何自定义鼠标右键菜单 添加新建文本文档

    鼠标右键新建文本文档.reg REGEDIT4 [HKEY_CLASSES_ROOT\.txt] @="txtfile" "Content Type"=&quo ...

  8. Win7如何自定义鼠标右键菜单 添加新建EXCEL文档

    鼠标右键添加新建EXCEL文档.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.xls] "Content Type ...

  9. Win7如何自定义鼠标右键菜单 添加新建PowerPoint文档

    鼠标右键添加新建PowerPoint文档.reg Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.ppt] "Content ...

随机推荐

  1. java.lang.Class.getDeclaredMethod()方法详解

    Java.lang.Class.getDeclaredMethod()方法用法 注:方法返回一个Method对象,它反映此Class对象所表示的类或接口的指定已声明方法. 描述 java.lang.C ...

  2. Tornado之抽屉实战(1)--分析与架构

    项目模拟地址:http://dig.chouti.com/ 知识点应用: AJAX  用于偷偷发请求 原生ajax jQuery  ajax($.ajax) iframe伪造 上传文件 传统Form ...

  3. GCD 学习(四) dispatch_group

    如果想在dispatch_queue中所有的任务执行完成后在做某种操作,在串行队列中,可以把该操作放到最后一个任务执行完成后继续,但是在并行队列中怎么做呢.这就有dispatch_group 成组操作 ...

  4. CF938D Buy a Ticket

    这个题都想不出来,感觉

  5. cakephp的优点

    1.接口传参非常简单,直接域名/控制器名/方法名/param1/param2

  6. Entity Framework Tutorial Basics（35）：Local Data

    Local Data The Local property of DBSet provides simple access to the entities that are currently bei ...

  7. MySQL中的时间问题

    MySQL 获得当前日期时间 函数 获得当前日期+时间(date + time)函数:now() mysql> select now(); +---------------------+ | n ...

  8. Siemens3508手机AT指令发送短信的实验

    凡夫 最近利用Siemens3508旧手机做了AT指令发送短信的实验.有人可能认为我费那么大劲折腾累不累,告诉你这可是废物再利用,可以利用旧手机里的GSM/GPRS模块做无线远程多点分布数据采集.监控 ...

  9. grep多条件和sed合并两行

    grep多条件,最简单的方式是使用正则表达式: egrep "条件1|条件2"   sed合并两行,将 1 2 3 4 合并成: 1 2 3 4 sed '$!N;s/\n/\t/ ...

  10. [译]Javascript中的数列

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...