js實現自定義右鍵菜單
本文實例為大家分享了js實現右鍵菜單的具體代碼，供大家參考，具體內容如下
原理：
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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備