JQuery模擬網頁中自定義鼠標右鍵菜單

時間 2020-06-07

原文原文鏈接

題外話.......最近在開發一個網站項目的時候,須要用到網頁自定義右鍵菜單,在網上看了各路前輩大神的操做,頭暈目眩,爲了達到目的,忽然靈機一動,因而便有了這篇文章.css

先放個效果圖(沾沾自喜,大神勿噴):html

廢話很少說,進入正題:jquery

1.首先咱們要禁用掉原網頁中右鍵菜單瀏覽器

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

這樣目標區域的右鍵菜單就沒法使用了ide

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.接下來開始編寫咱們本身的菜單彈出窗口ui

思路:經過捕獲鼠標點擊時的事件在屏幕上被觸發的位置(x,y),而後把咱們本身編寫的窗口利用CSS中的"定位"顯示在哪裏.this

2.1:如何獲取到鼠標在屏幕上點擊的事件?spa

JQuery Event.which屬性---引用JQuery中文手冊中的內容scala

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 座標

在上面的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>