communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > le corps du texte

javascript menu contextuel de la souris personnalisé effect_javascript skills

WBOY
Libérer： 2016-05-16 15:16:27
original
1191 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.

Étiquettes associées：
javascript鼠标右键菜单 javascript右键菜单
source：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 Javascript Article suivant：Résumé des solutions pour Eclipse bloqué lors de l'édition des compétences jsp et js files_javascript
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Le survol d'un élément de menu spécifique n'affiche pas le sous-menu masqué J'ai créé des classes pour les éléments de menu afin de pouvoir les appeler. .dropdownBox{...
Depuis 2024-04-04 14:39:08
0
1
359
Afficher le menu déroulant à l'aide de l'événement de survol de la souris J'ai un menu contextuel et j'essaie d'utiliser les événements de survol de la souris pour ...
Depuis 2024-04-03 15:14:43
0
1
416
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal