js實現(xiàn)自定義右鍵菜單
本文實例為大家分享了js實現(xiàn)右鍵菜單的具體代碼，供大家參考，具體內(nèi)容如下
原理：
1.屏蔽默認(rèn)的右鍵菜單
2.點(diǎn)擊右鍵獲取位置，讓自定義菜單到點(diǎn)擊位置上
3.點(diǎn)擊左鍵，自定義菜單消失
代碼如下
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>右鍵菜單練習(xí)</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>復(fù)制</li> <li>剪切</li> <li>粘貼</li></ul><script> //給document 添加 oncontextmenu 事件 取消默認(rèn)的右鍵菜單的行為。 //點(diǎn)擊右鍵的時候，獲得點(diǎn)擊的位置。 var ul = document.getElementById(’ul’); document.oncontextmenu=function(e){ e=e||window.event; //屏蔽樣式 e.preventDefault?e.preventDefault():(e.returnValue=false); //獲取坐標(biāo) var x=e.clientX;//視口的位置 var y=e.clientY; //顯示菜單 ul.style.display=’block’; ul.style.top=y+’px’; ul.style.left=x+’px’; }; //點(diǎn)擊左鍵 自定義菜單消失 document.onclick=function () { ul.style.display=’none’; }; //給每個li添加 鼠標(biāo)進(jìn)入(onmouseover)和鼠標(biāo)離開(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
網(wǎng)公網(wǎng)安備