js實現(xiàn)自定義右鍵菜單
本文實例為大家分享了js實現(xiàn)右鍵菜單的具體代碼，供大家參考，具體內(nèi)容如下
原理：
1.屏蔽默認的右鍵菜單
2.點擊右鍵獲取位置，讓自定義菜單到點擊位置上
3.點擊左鍵，自定義菜單消失
代碼如下
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>右鍵菜單練習</title> <style> *{ margin: 0; /*padding: 0;*/ } ul{ width: 120px; height: 150px; background-color: rgb(204,204,204); font-size: 22px; list-style: none; line-height: 50px; position: fixed; display: none; } li{ background-color: rgb(238,238,238); padding-left: 15px; } </style></head><body><ul id='ul'> <li>復制</li> <li>剪切</li> <li>粘貼</li></ul><script> //給document 添加 oncontextmenu 事件 取消默認的右鍵菜單的行為。 //點擊右鍵的時候，獲得點擊的位置。 var ul = document.getElementById(’ul’); document.oncontextmenu=function(e){ e=e||window.event; //屏蔽樣式 e.preventDefault?e.preventDefault():(e.returnValue=false); //獲取坐標 var x=e.clientX;//視口的位置 var y=e.clientY; //顯示菜單 ul.style.display=’block’; ul.style.top=y+’px’; ul.style.left=x+’px’; }; //點擊左鍵 自定義菜單消失 document.onclick=function () { ul.style.display=’none’; }; //給每個li添加 鼠標進入(onmouseover)和鼠標離開(onmouseout)的事件 var lis = document.querySelectorAll(’li’); for (let i = 0; i < lis.length; i++) { lis[i].onmouseover=function () { lis[i].style.backgroundColor=’rgb(204,204,204)’; }; lis[i].onmouseout=function () { lis[i].style.backgroundColor=’rgb(238,238,238)’; } }</script></body></html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關文章：
1. HTML <!DOCTYPE> 標簽2. 使用EF Code First搭建簡易ASP.NET MVC網(wǎng)站并允許數(shù)據(jù)庫遷移3. HTML5 Canvas繪制圖形從入門到精通4. 低版本IE正常運行HTML5+CSS3網(wǎng)站的3種解決方案5. Django中如何使用Channels功能6. .NET Core中使用gRPC的方法7. 基于Python下載網(wǎng)絡圖片方法匯總代碼實例8. Vue ElementUI實現(xiàn):限制輸入框只能輸入正整數(shù)的問題9. 基于JavaScript實現(xiàn)大文件上傳后端代碼實例10. php對gb編碼動態(tài)轉(zhuǎn)utf-8編碼的幾種方法評測
網(wǎng)公網(wǎng)安備