javascript menu contextuel de la souris personnalisé effect

javascript menu contextuel de la souris personnalisé effect_javascript skills

WBOY

Libérer： 2016-05-16 15:16:27

original

1121 Les gens l'ont consulté

L'exemple de cet article explique comment implémenter le menu contextuel de la souris javascript et le partage avec tout le monde pour votre référence. Le contenu spécifique est le suivant

Rendu :

Code spécifique :

<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="http://www.jb51.net/" target="_blank">脚本之家</a></li>
  <li><a href="http://www.jb51.net/" target="_blank">脚本之家</a></li>
  <li><a href="http://www.jb51.net/" target="_blank">脚本之家</a></li>
  <li><a href="http://www.jb51.net/" target="_blank">脚本之家</a></li>
</ul>
  </body>
</html>

Copier après la connexion

J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.