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

先放个效果图(沾沾自喜,大神勿喷):

废话不多说,进入正题:

1.首先 我们要禁用掉原网页中右键菜单

  1. //JQuery代码
  2. $(selector).on('contextmenu', function () {
  3.                     return false;
  4. })

这样目标区域的右键菜单就无法使用了

demo1:

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.  <head>
  5.      <meta charset="utf-8">
  6.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.      <meta name="description" content="">
  8.      <meta name="keywords" content="">
  9.      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  10.      <style>
  11.          #demo1 {
  12.              display: block;
  13.              background-color: turquoise;
  14.              color: #fff;
  15.              font-size: 100px;
  16.              text-align: center;
  17.              width: 100%;
  18.              height: 500px;
  19.          }
  20.      </style>
  21.  </head>
  22.  <div id="demo1">
  23.  <p>此区域(带颜色)被禁用了右键菜单</p>
  24.  </div>
  25.  
  26.  <body>
  27.      <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
  28.      <script>
  29.          $('#demo1').on('contextmenu',function () {//禁用掉#demo1的右键菜单
  30.              return false;
  31.          })
  32.      </script>
  33.  </body>
  34.  
  35.  </html>

2.接下来开始编写我们自己的菜单弹出窗口

思路:通过捕获鼠标点击时的事件在屏幕上被触发的位置(x,y),然后把我们自己编写的窗口利用CSS中的"定位"显示在哪里.

2.1:如何获取到鼠标在屏幕上点击的事件?

JQuery Event.which属性---引用JQuery中文手册中的内容

which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮。

对于键盘和鼠标事件，该属性用于确定你按下的是哪一个键盘按键或鼠标按钮。

which属性对DOM原生的event.keyCode和event.charCode进行了标准化。

适用的事件类型主要有键盘事件：keypress、keydown、keyup，以及鼠标事件：mouseup、mousedown。

该属性属于jQuery的Event对象(实例)

$(selector).on('mousedown',function(event){

var code=event.which;//返回值是一个Number类型

})

event.which属性值 对应的鼠标按钮
1 鼠标左键
2 鼠标中键(滚轮键)
3 鼠标右键 
  1.  $('#demo1').on('mousedown',function(event){//紧接上面的实例demo1 在script中插入这段代码即可获取到鼠标点击事件
  2.              var code=event.which;//判断是单机了鼠标哪个键(1,2,3)
  3.              alert('区域被鼠标点击了---'+code);
  4.  })

2.2 如何获取事件发生的位置(X,Y)?

引用一位前辈的:链接: https://www.cnblogs.com/king-ying/p/5936429.html

event对象中的属性:

  1.  event.offsetX //设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标
  2.  event.offsetY //设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标
  3.  event.pageX   //设置或获取鼠标指针位置相对于页面左上角的 x 坐标
  4.  event.pageY   //设置或获取鼠标指针位置相对于页面左上角的 y 坐标
  5.  event.clientX //设置或获取鼠标指针位置相对于浏览器窗口可视区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条
  6.  event.clientY //设置或获取鼠标指针位置相对于浏览器窗口可视区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条
  7.  event.screenX //设置或获取获取鼠标指针位置相对于屏幕的 x 坐标
  8.  event.screenY //设置或获取鼠标指针位置相对于屏幕的 y 坐标
  1. 在上面的demo1的 js 代码中 增添 两句
    1 $('#demo1').on('mousedown',function(event){
  2.              var code=event.which;
  3.              var x=event.pageX;//相对于页面左上角X的坐标
  4.              var y=event.pageY;//相对于页面左上角Y的坐标
  5.              alert('区域被点击了'+code+"位置:"+'('+x+','+y+')');
  6.  })

为了方便观察 重新做了一个demo2(复制粘贴即可运行):

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.  <head>
  5.      <meta charset="utf-8">
  6.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.      <meta name="description" content="">
  8.      <meta name="keywords" content="">
  9.      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  10.      <style>
  11.          #demo1 {
  12.              display: block;
  13.              background-color: turquoise;
  14.              color: #fff;
  15.              font-size: 100px;
  16.              text-align: center;
  17.              width: 100%;
  18.              height: 500px;
  19.          }
  20.          #click-pos{
  21.              display:block;
  22.              background-color: bisque;
  23.              color: #000;
  24.              margin: 20px;
  25.              float: left;
  26.              min-width: 200px;
  27.              font-size: 20px;
  28.              text-align: center;
  29.          }
  30.      </style>
  31.  </head>
  32.  <label id="click-pos">
  33.  显示内容
  34.  </label>
  35.  <div id="demo1">
  36.  <p>此区域(带颜色)被禁用了右键菜单</p>
  37.  </div>
  38.  
  39.  <body>
  40.      <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
  41.      <script>
  42.          //禁用掉区域的默认右键事件
  43.          $('#demo1').on('contextmenu',function () {
  44.              return false;
  45.          })
  46.  
  47.          $('#demo1').on('mousedown',function(event){
  48.              var code=event.which;
  49.              var x=event.pageX;//相对于页面左上角X的坐标
  50.              var y=event.pageY;//相对于页面左上角Y的坐标
  51.              var mouse="";//点击类型
  52.              switch(code){
  53.                  case 1:mouse="左键";
  54.                  break;
  55.                  case 2:mouse="中键(滚轮)";
  56.                  break;
  57.                  case 3:mouse="右键";
  58.                  break;
  59.                  default:break;
  60.              }
  61.              $('#click-pos').html("点击类型:"+mouse+"--位置-X:"+x+'-Y:'+y);//显示到页面上
  62.          })
  63.  
  64.      </script>
  65.  </body>
  66.  
  67.  </html>

核心部分差不多就是上面的内容

3.编写自定义菜单

达到的显示效果:

废话不多上代码:

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.  <head>
  5.      <meta charset="utf-8">
  6.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.      <meta name="description" content="">
  8.      <meta name="keywords" content="">
  9.      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  10.      <style>
  11.          #demo1 {
  12.              display: block;
  13.              background-color: turquoise;
  14.              color: #fff;
  15.              font-size: 50px;
  16.              text-align: center;
  17.              width: 100%;
  18.              height: 500px;
  19.          }
  20.  
  21.          #click-pos {
  22.              display: block;
  23.              background-color: bisque;
  24.              color: #000;
  25.              margin: 20px;
  26.              float: left;
  27.              min-width: 200px;
  28.              font-size: 20px;
  29.              text-align: center;
  30.          }
  31.  
  32.          /* 右键菜单遮罩层 */
  33.          #layer {
  34.              position: fixed;
  35.              left: 0;
  36.              top: 0;
  37.              width: 100%;
  38.              height: 100%;
  39.              background-color: transparent;
  40.          }
  41.  
  42.          #mouse-menu {
  43.              position: fixed;
  44.              z-index: 5;
  45.              left: 0;
  46.              right: 0;
  47.              width: 130px;
  48.              max-height: 120px;
  49.              overflow: auto;
  50.              display: block;
  51.              background-color: #f1ecec;
  52.              list-style: none;
  53.              padding: 10px;
  54.              text-align: center;
  55.              border-radius: 8px;
  56.              box-shadow: 0 0 4px #ddd;
  57.          }
  58.  
  59.          /* 菜单的每个选项 */
  60.          #mouse-menu li {
  61.              border-top: 1px solid #000;
  62.          }
  63.  
  64.          #mouse-menu li:last-child {
  65.              border-bottom: 1px solid #000;
  66.          }
  67.  
  68.          /* 当鼠标移入时 */
  69.          #mouse-menu li:hover {
  70.              background-color: deepskyblue;
  71.          }
  72.      </style>
  73.  </head>
  74.  <label id="click-pos">
  75.      显示内容
  76.  </label>
  77.  <div id="demo1">
  78.      <p>在此区域启用自定义菜单,原菜单已禁用</p>
  79.  </div>
  80.  <!-- 最外层为遮罩层,用于绑定点击任意位置关闭菜单事件 -->
  81.  <!-- 默认隐藏 -->
  82.  <div id="layer" style="display:none">
  83.      <ul id="mouse-menu">
  84.          <li>选项卡1</li>
  85.          <li>选项卡2</li>
  86.          <li>选项卡3</li>
  87.          <li>选项卡4</li>
  88.          <li>选项卡5</li>
  89.          <li>选项卡6</li>
  90.      </ul>
  91.  </div>
  92.  
  93.  <body>
  94.      <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
  95.      <script>
  96.          //禁用掉区域的默认右键事件
  97.          $('#demo1').on('contextmenu', function () {
  98.              return false;
  99.          })
  100.          $('#layer').on('contextmenu', function () {
  101.              return false;
  102.          })
  103.  
  104.          $('#demo1').on('mousedown', function (event) {
  105.              var code = event.which;
  106.              var x = event.pageX;//相对于页面左上角X的坐标
  107.              var y = event.pageY;//相对于页面左上角Y的坐标
  108.              var mouse = "";//点击类型
  109.              switch (code) {
  110.                  case 1: mouse = "左键";
  111.                      break;
  112.                  case 2: mouse = "中键(滚轮)";
  113.                      break;
  114.                  case 3: mouse = "右键";
  115.                      break;
  116.                  default: break;
  117.              }
  118.              $('#click-pos').html("点击类型:" + mouse + "--位置-X:" + x + '-Y:' + y);//坐标显示到页面上
  119.  
  120.              // 如果是鼠标右键召唤出弹出菜单
  121.              if (code == 3) {
  122.                  $('#layer').show();
  123.                  //改变菜单的位置到事件发生的位置
  124.                  $('#mouse-menu').css('left', x);
  125.                  $('#mouse-menu').css('top', y);
  126.              }
  127.          })
  128.          // 点击选项卡时触发
  129.          $('#layer').on('click', 'li', function (event) {
  130.              //显示当前点击的内容
  131.              console.log("ssss");
  132.              var text = $(this).html();
  133.              $('#click-pos').html(text);
  134.              // event.stopPropagation();//阻止事件冒泡
  135.          })
  136.          //点击遮罩层时隐藏需要的菜单
  137.          $('#layer').on('click', function () {
  138.              $(this).hide();
  139.          })
  140.  
  141.      </script>
  142.  </body>
  143.  
  144.  </html>

emmmm以上就是今天的内容(也许有点粗糙.第一次写这么长,有问题欢迎评论或者私信)

JQuery模拟网页中自定义鼠标右键菜单的更多相关文章

  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. jq自定义鼠标右键菜单

    效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  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. centos下安装ipython(minglnghang命令行)

    下载文件 wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate 执行安装 python get-pip.py 这就安装好了 ...

  2. spring mvc拦截器HandlerInterceptor

    本文主要介绍springmvc中的拦截器,包括拦截器定义和的配置,然后演示了一个链式拦截的测试示例,最后通过一个登录认证的例子展示了拦截器的应用 拦截定义 定义拦截器,实现HandlerInterce ...

  3. [转]Apache的CRT格式SSL证书转换成IIS用的PFX格式

    转自:http://www.getvm.net/apache-crt-ssl-convert-to-iis-pfx/ Apache使用的SSL证书是.crt格式,如果你的网站从Apache换到了win ...

  4. css3圆形光环闪烁效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Android自定义View之绘制虚线

    现在实现一个效果,有个虚线分割和阴影效果.一个一个实现. 分为2中方式. 1.设计出图,我们SRC引入进来(最简单,但是需要其他资源支持). 2.code实现,有些难度,需要查资料. 现在把第2种方式 ...

  6. IIS支持http协议的：put、delete等方法

    HTTP常见方法:DELETE, GET, HEAD, OPTIONS, POST, PUT, PATCH 以下是从网上搜索的方法:其实经过测试,只配置最后那个web.config就可以实现这个功能: ...

  7. 爬虫IP被禁的简单解决方法——切换UserAgent

    [转载]Python爬虫之UserAgent 用到的库 https://github.com/hellysmile/fake-useragent

  8. 乘风破浪：LeetCode真题_020_Valid Parentheses

    乘风破浪:LeetCode真题_020_Valid Parentheses 一.前言 下面开始堆栈方面的问题了,堆栈的操作基本上有压栈,出栈,判断栈空等等,虽然很简单,但是非常有意义. 二.Valid ...

  9. 深入浅出SharePoint——Caml快速开发

    适用于Visual Studio 2010的Caml智能感知工具 http://visualstudiogallery.msdn.microsoft.com/15055544-fda0-42db-a6 ...

  10. [EffectiveC++]item22：Declare data members private

    将成员变量隐藏在函数接口的背后,可以为“所有可能的实现”提供弹性, 假设我们有一个public成员变量,而我们最终取消了它,多少代码可能会被破坏呢?那是一个不可知的大量. protected成员变量就 ...