效果：

代码：

<!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. [Python Study Notes]一个简单的区块链结构(python 2.7)

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  2. 为Docker镜像添加SSH服务

    一.基于commit命令创建 1. 首先下载镜像 $ docker run -it ubuntu:16.04 /bin/bash 2. 安装SSH服务 #更新apt缓存 root@5ef1d31632 ...

  3. day17 9.关闭资源与异常处理

    Java程序跟任何外部设备进行连接之后,都要把连接断开,把资源释放掉.Connection是一个重量级资源,Connecton占内存,Connection的获取是比较消耗资源和内存的.finally是 ...

  4. 浏览器默认标签样式总结及css初始化程序（转）

    浏览器默认标签样式总结及css初始化程序   html中的大部分的标签都有一些糟糕的样式,有的是标签天然自带的,有的是浏览器默认设置的,我们在写网页时,这些默认的样式就会时不时的跳出来捣一下乱,搞得我 ...

  5. c类库，委托，var ，运算符 is 和 as 。

    类库(Class Library)  格式   .dll  文件 类库   就是类的仓库 c#代码被编译过以后的文件,不可阅读,不可修改,只能调用. 类库是一个综合性的面向对象的可重用类型集合,这些类 ...

  6. JS中的引用类型

    JS的数据类型可以分为两类:一类是原始类型(比如数字.布尔值.字符串.undefined.null),另外就是对象类型.我们通常将对象类型称为引用类型.对象值都是引用.举个例子来说明,下如下的代码: ...

  7. Linux-shell获取天气

    用Linux中的shell获取天气,本来觉的比较难,原来,真简单,个位数的代码就搞定. 获取对应城市天气 所有天气信息都从中国天气网获取.每一个城市多会对应一个id(比如,北京为101010100,因 ...

  8. Entity Framework Tutorial Basics（6）：Model Browser

    Model Browser: We have created our first Entity Data Model for School database in the previous secti ...

  9. Understanding the Effective Receptive Field in Deep Convolutional Neural Networks

    Understanding the Effective Receptive Field in Deep Convolutional Neural Networks 理解深度卷积神经网络中的有效感受野 ...

  10. MATLAB数字图像处理（一）基础操作和傅立叶变换

    数字图像处理是一门集计算机科学.光学.数学.物理学等多学科的综合科学.随着计算机科学的发展,数字图像处理技术取得了巨大的进展,呈现出强大的生命力,已经在多种领域取得了大量的应用,推动了社会的发展.其中 ...