recherche

Maison  >  Article  >  interface Web  >  javascript menu contextuel de la souris personnalisé effect_javascript skills

javascript menu contextuel de la souris personnalisé effect_javascript skills

WBOY
WBOYoriginal
2016-05-16 15:16:271192parcourir

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>

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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Implémentation du travail Web pour le téléchargement de fichiers et le code de téléchargement Explication détaillée_Compétences JavascriptArticle suivant：Implémentation du travail Web pour le téléchargement de fichiers et le code de téléchargement Explication détaillée_Compétences Javascript

Articles Liés

Voir plus