效果：

代码：

<!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. 【265】shell文件创建链接

    优点:可以在其他文件夹内运行对应的*.sh文件,例如通过putty会默认进入的文件夹,可以将链接文件放在那里,就可以直接调用了! 方法:很简单 1. 在文件上点击右键>创建链接 2. 可以对下面 ...

  2. Tornado模板配置

    #!/usr/bin/env python # -*- coding:utf-8 -*- #tornado模板配置 import tornado.ioloop import tornado.web c ...

  3. 2018多校第九场1010 （HDU6424) 数学

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6424 解法:找规律.因为最多三项,a1^a2^a3可以拆成(a1+2)+(a2+1)*a3,然后建成数 ...

  4. 窗体控件JFrame的使用

    ---------------siwuxie095 工程名:TestUI 包名:com.siwuxie095.ui 类名:MyFrame.java 工程结构目录如下: 在 Source 界面和 Des ...

  5. webform 内置对象（页面间传值）

    QueryString/URL传值  页面名后面加?变量名=值 有点:不占服务器内存. 缺点:保密性差:传递字符串长度有限. Response   --相应请求对象 Response.Redirect ...

  6. Linux如何修改网络环境参数

    如下设置: 检验是否可以连通,就使用ping命令ping 网关开始的时候总是现实unreachable 设置IP:sudo ifconfig eth0 133.133.133.190 netmask ...

  7. C语言-郝斌笔记-003数据类型

    基本类型数据 整数 整型     —— int      --4字节  短整型   —— short int   ——2字节 长整型   —— long int    ——8字节      浮点数[实 ...

  8. 数据结构 merge_link合并链表

    问题描述 本题任务是维护一条非递减的链表,初始长度为 0,记这条链表为主链表.对主链表做 N 次操作,操作分两种:1 k a1 a2 … ak,表示一条长度为 k 且非递减的链表,需要将这条链表合并到 ...

  9. IntelliJ+AntBuild+Tomcat实现Maven站点的热部署

    这段时间要研究WebGL技术,做一下三维建模项目,涉及到较多的前端编码.eclipse编译器那令人着急的编码提示功能,以及丑恶的界面对项目的开展造成了一定的阻碍.为解决这个问题,转向IntelliJ ...

  10. 第6章 jQuery与Ajax的应用

    6.1 Ajax的优势和不足 6.1.1 Ajax的优势 1.不需要插件支持 2.优秀的用户体验 3.提高Web程序的性能 Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的 ...