javascript自定義右鍵菜單並屏蔽默認右鍵菜單【原創】


原理很簡單,就是右擊鼠標(oncontextmenu事件)return false阻止默認右鍵菜單,之后顯示自定義的右鍵菜單,菜單顯示位置由事件源的clientX和clientY計算得出。



[html]  view plain  copy
 print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>拖拽+自定義右鍵菜單</title>  
  6. <style type="text/css">  
  7. body{ margin:0; padding:0}  
  8. #ul1{ width:130px; height:120px; padding:10px 3px; background:#fff; border:#ACA899 1px solid; display:none; position:absolute; left:0;top:0;}  
  9. #ul1 li{ width:130px; height:28px; line-height:28px; font-size:14px; border-bottom:#ACA899 1px dashed; text-align:center; list-style:none}  
  10. #ul1 li:hover{ background:#316AC5}  
  11. </style>  
  12. <script type="text/javascript">  
  13. window.onload=function()  
  14. {  
  15. var ul=document.getElementById("ul1")  
  16. document.oncontextmenu=function(ev)  
  17. {  
  18. var ev=ev||window.event  
  19. var l=ev.clientX  
  20. var t=ev.clientY  
  21. ul.style.display="block"  
  22. ul.style.left=l+'px'  
  23. ul.style.top=t-16+'px'  
  24. return false;  
  25. }  
  26. document.onclick=function()  
  27. {  
  28. ul.style.display="none"  
  29. }  
  30. }  
  31. </script>  
  32. </head>  
  33.   
  34. <body>  
  35. <ul id="ul1">  
  36. <li>自定義右鍵菜單</li>  
  37. <li>自定義右鍵菜單</li>  
  38. <li>自定義右鍵菜單</li>  
  39. <li>自定義右鍵菜單</li>  
  40. </ul>  
  41. </body>  
  42. </html>  

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com