js實(shí)現(xiàn)自定義右鍵菜單
本文實(shí)例為大家分享了js實(shí)現(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)擊右鍵的時(shí)候，獲得點(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’; }; //給每個(gè)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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 如何在jsp界面中插入圖片2. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）3. 在JSP中使用formatNumber控制要顯示的小數(shù)位數(shù)方法4. 得到XML文檔大小的方法5. jsp實(shí)現(xiàn)textarea中的文字保存換行空格存到數(shù)據(jù)庫的方法6. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)7. ASP常用日期格式化函數(shù) FormatDate()8. JavaScrip簡(jiǎn)單數(shù)據(jù)類型隱式轉(zhuǎn)換的實(shí)現(xiàn)9. XML入門的常見問題(二)10. ASP.NET Core實(shí)現(xiàn)中間件的幾種方式
網(wǎng)公網(wǎng)安備