效果：

代码：

<!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. 未找到与约束contractname Microsoft.VisualStudio.Utilities.IContentTypeRegistryService...匹配的导出

    ***以下操作后一定要重启VS,重启VS,重启VS重要的事情说三遍*** //************************************************************* ...

  2. android官方手册学习笔记

    数据存储 在提交sharedpreference 修改的时候,用apply代替commit 避免UI线程阻塞   设备兼容 系统会自动根据当前屏幕的大小等,在相应的文件夹里去找资源,如large等等 ...

  3. ActionBarActivity的使用注意事项

    1.调用getActionbar()方法返回为空的解决方法 此activity是设计来支持低版本系统用actionbar的,低版本没有getActionbar() 需要使用 getSupportAct ...

  4. 读书笔记<深入理解JVM>01 关于OutOfMemoryError 堆空间的溢出

    代码片段如下: package com.gosaint.shiro; import java.util.ArrayList; import java.util.List; public class H ...

  5. [luogu3385]dfs_spfa判负环模板

    解题关键:模板保存. 判负环不需要memset dis数组,因为已经更新过得d数组一定小于0,如果当前点可以更新d,说明d更小,有可能继续扩大负环,所以继续更新:如果比d[v]大,则不可能继续更新负环 ...

  6. bzoj 2653 middle(主席树）

    题面:https://vjudge.net/problem/HYSBZ-2653 博客:https://blog.csdn.net/litble/article/details/78984846 这个 ...

  7. ThinkPHP的URL模式

    ThinkPHP的URL模式有四种,默认是PATHINFO模式,其他三种分别为:普通模式.REWRITE和兼容模式. 一.PATHINFO模式 浏览器输入格式为: http://localhost/d ...

  8. 面试题: Struts2

    1． Struts2与Struts1的联系与区别是什么?为什么要用Struts2? 答案: struts1与struts2都是mvc框架的经典实现模式. Struts2不是从Struts1升级而来,而 ...

  9. PCL—点云滤波（基于点云频率） 低层次点云处理

    博客转载自:http://www.cnblogs.com/ironstark/p/5010771.html 1.点云的频率 今天在阅读分割有关的文献时,惊喜的发现,点云和图像一样,有可能也存在频率的概 ...

  10. SingletonPattern（23种设计模式之一）

    设计模式六大原则(1):单一职责原则 设计模式六大原则(2):里氏替换原则 设计模式六大原则(3):依赖倒置原则 设计模式六大原则(4):接口隔离原则 设计模式六大原则(5):迪米特法则 设计模式六大 ...