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

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

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

废话不多说,进入正题:

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

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

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

demo1:

 1  2  3  4  5      6      7      8      9     10     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     21 22 23 
此区域(带颜色)被禁用了右键菜单
24 25 26 27     28     33 34 35 

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类型

    })

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 坐标

在上面的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  2  3  4  5      6      7      8      9     10     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     31 32 33 显示内容34 35 36 
此区域(带颜色)被禁用了右键菜单
37 38 39 40     41     65 66 67 

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

3.编写自定义菜单

达到的显示效果:

 废话不多上代码:

  1   2   3   4   5       6       7       8       9      10      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      73  74  75     显示内容 76  77  78     
在此区域启用自定义菜单,原菜单已禁用
 79  80  81  82  83      84         
选项卡1
 85         
选项卡2
 86         
选项卡3
 87         
选项卡4
 88         
选项卡5
 89         
选项卡6
 90      91  92  93  94      95     142 143 144 

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

原文出处：https://www.cnblogs.com/roseAT/p/9955309.html