javascript鼠标右键菜单自定义效果

2019-11-20 10:37:26

字体：大中小

来源：转载

供稿：网友

本文实例讲解了javascript鼠标右键菜单的实现方法，分享给大家供大家参考，具体内容如下

效果图：

具体代码：

<html>  <head>    <meta charset="gb2312" />    <title></title>    <style>      #menu{        border:solid 1px gray;        width:100px;        display:none;        position:absolute;        background-color:ghostwhite;        margin: 0;        padding: 0;        list-style-type: none;      }      #menu>li{        border-bottom: dashed 1px gray;      }    </style>    <script type="text/javascript">    window.onload=function(){      var oUl=document.getElementById('menu');        document.oncontextmenu=function(ev){          var oEvent=ev||event;          //一定要加px，要不然chrom不认          oUl.style.top=oEvent.clientY+'px';          oUl.style.left=oEvent.clientX+'px';          oUl.style.display='block';          return false;        }        document.onclick=function(){          oUl.style.display='none';        }    };    </script>  </head>  <body><ul id="menu">  <li><a href="//www.VeVB.COm/" target="_blank">武林网</a></li>  <li><a href="//www.VeVB.COm/" target="_blank">武林网</a></li>  <li><a href="//www.VeVB.COm/" target="_blank">武林网</a></li>  <li><a href="//www.VeVB.COm/" target="_blank">武林网</a></li></ul>  </body></html>

希望本文所述对大家学习javascript程序设计有所帮助。

上一篇：javascript DIV跟随鼠标移动

下一篇：JavaScript获取当前运行脚本文件所在目录的方法