前言
題外話.......最近在開發一個網站項目的時候,需要用到網頁自定義右鍵菜單,在網上看了各路前輩大神的操作,頭暈目眩,為了達到目的,突然靈機一動,于是便有了這篇文章.
先放個效果圖(沾沾自喜,大神勿噴):
廢話不多說,進入正題:
1.首先 我們要禁用掉原網頁中右鍵菜單
//JQuery代碼$(selector).on('contextmenu', function () { return false;})這樣目標區域的右鍵菜單就無法使用了
demo1:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <style> #demo1 { display: block; background-color: turquoise; color: #fff; font-size: 100px; text-align: center; width: 100%; height: 500px; } </style></head><div id="demo1"><p>此區域(帶顏色)被禁用了右鍵菜單</p></div><body> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <script> $('#demo1').on('contextmenu',function () {//禁用掉#demo1的右鍵菜單 return false; }) </script></body></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 | 鼠標右鍵 |
$('#demo1').on('mousedown',function(event){//緊接上面的實例demo1 在script中插入這段代碼即可獲取到鼠標點擊事件 var code=event.which;//判斷是單機了鼠標哪個鍵(1,2,3) alert('區域被鼠標點擊了---'+code); })2.2 如何獲取事件發生的位置(X,Y)?
引用一位前輩的:event對象中的屬性:
event.offsetX //設置或獲取鼠標指針位置相對于觸發事件的對象的 x 坐標event.offsetY //設置或獲取鼠標指針位置相對于觸發事件的對象的 y 坐標event.pageX //設置或獲取鼠標指針位置相對于頁面左上角的 x 坐標event.pageY //設置或獲取鼠標指針位置相對于頁面左上角的 y 坐標event.clientX //設置或獲取鼠標指針位置相對于瀏覽器窗口可視區域的 x 坐標，其中客戶區域不包括窗口自身的控件和滾動條event.clientY //設置或獲取鼠標指針位置相對于瀏覽器窗口可視區域的 y 坐標，其中客戶區域不包括窗口自身的控件和滾動條event.screenX //設置或獲取獲取鼠標指針位置相對于屏幕的 x 坐標event.screenY //設置或獲取鼠標指針位置相對于屏幕的 y 坐標
在上面的demo1的 js 代碼中 增添 兩句1 $('#demo1').on('mousedown',function(event){ var code=event.which; var x=event.pageX;//相對于頁面左上角X的坐標 var y=event.pageY;//相對于頁面左上角Y的坐標 alert('區域被點擊了'+code+"位置:"+'('+x+','+y+')');})為了方便觀察 重新做了一個demo2(復制粘貼即可運行):
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <style> #demo1 { display: block; background-color: turquoise; color: #fff; font-size: 100px; text-align: center; width: 100%; height: 500px; } #click-pos{ display:block; background-color: bisque; color: #000; margin: 20px; float: left; min-width: 200px; font-size: 20px; text-align: center; } </style></head><label id="click-pos">顯示內容</label><div id="demo1"><p>此區域(帶顏色)被禁用了右鍵菜單</p></div><body> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <script> //禁用掉區域的默認右鍵事件 $('#demo1').on('contextmenu',function () { return false; }) $('#demo1').on('mousedown',function(event){ var code=event.which; var x=event.pageX;//相對于頁面左上角X的坐標 var y=event.pageY;//相對于頁面左上角Y的坐標 var mouse="";//點擊類型 switch(code){ case 1:mouse="左鍵"; break; case 2:mouse="中鍵(滾輪)"; break; case 3:mouse="右鍵"; break; default:break; } $('#click-pos').html("點擊類型:"+mouse+"--位置-X:"+x+'-Y:'+y);//顯示到頁面上 }) </script></body></html>核心部分差不多就是上面的內容
3.編寫自定義菜單
達到的顯示效果:
廢話不多上代碼:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <style> #demo1 { display: block; background-color: turquoise; color: #fff; font-size: 50px; text-align: center; width: 100%; height: 500px; } #click-pos { display: block; background-color: bisque; color: #000; margin: 20px; float: left; min-width: 200px; font-size: 20px; text-align: center; } /* 右鍵菜單遮罩層 */ #layer { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: transparent; } #mouse-menu { position: fixed; z-index: 5; left: 0; right: 0; width: 130px; max-height: 120px; overflow: auto; display: block; background-color: #f1ecec; list-style: none; padding: 10px; text-align: center; border-radius: 8px; box-shadow: 0 0 4px #ddd; } /* 菜單的每個選項 */ #mouse-menu li { border-top: 1px solid #000; } #mouse-menu li:last-child { border-bottom: 1px solid #000; } /* 當鼠標移入時 */ #mouse-menu li:hover { background-color: deepskyblue; } </style></head><label id="click-pos"> 顯示內容</label><div id="demo1"> <p>在此區域啟用自定義菜單,原菜單已禁用</p></div><!-- 最外層為遮罩層,用于綁定點擊任意位置關閉菜單事件 --><!-- 默認隱藏 --><div id="layer" style="display:none"> <ul id="mouse-menu"> <li>選項卡1</li> <li>選項卡2</li> <li>選項卡3</li> <li>選項卡4</li> <li>選項卡5</li> <li>選項卡6</li> </ul></div><body> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <script> //禁用掉區域的默認右鍵事件 $('#demo1').on('contextmenu', function () { return false; }) $('#layer').on('contextmenu', function () { return false; }) $('#demo1').on('mousedown', function (event) { var code = event.which; var x = event.pageX;//相對于頁面左上角X的坐標 var y = event.pageY;//相對于頁面左上角Y的坐標 var mouse = "";//點擊類型 switch (code) { case 1: mouse = "左鍵"; break; case 2: mouse = "中鍵(滾輪)"; break; case 3: mouse = "右鍵"; break; default: break; } $('#click-pos').html("點擊類型:" + mouse + "--位置-X:" + x + '-Y:' + y);//坐標顯示到頁面上 // 如果是鼠標右鍵召喚出彈出菜單 if (code == 3) { $('#layer').show(); //改變菜單的位置到事件發生的位置 $('#mouse-menu').css('left', x); $('#mouse-menu').css('top', y); } }) // 點擊選項卡時觸發 $('#layer').on('click', 'li', function (event) { //顯示當前點擊的內容 console.log("ssss"); var text = $(this).html(); $('#click-pos').html(text); // event.stopPropagation();//阻止事件冒泡 }) //點擊遮罩層時隱藏需要的菜單 $('#layer').on('click', function () { $(this).hide(); }) </script></body></html>總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
