Maison > interface Web > js tutoriel > Exemple d'appel de menu contextuel avec les compétences js_javascript

Exemple d'appel de menu contextuel avec les compétences js_javascript

WBOY
Libérer: 2016-05-16 15:25:11
original
1181 Les gens l'ont consulté

L'exemple de cet article décrit l'exemple de code d'appel du menu contextuel via js et le partage avec vous pour votre référence. Les détails sont les suivants :

Principe
Lorsque l'utilisateur clique avec le bouton droit, un événement de menu contextuel sera déclenché. Par défaut, le menu contextuel par défaut du navigateur sera déclenché. En bloquant manuellement ce comportement par défaut, le menu contextuel personnalisé sera alors affiché. clics.
Code
1.html

<div id="box" style="color:red;width: 100%;height:1000px;" >
 <div id="left" style="float:left;width:500px;margin-left: 50px;height:500px;background: #cdeddf;">
  
 </div> 
 <div id="right" style="float:right;width:600px;margin-right: 50px;height:500px;background: #cdeaae;">
 </div>
 <ul id="menu" style="position: absolute;visibility: hidden;list-style: none;">
  <li>按钮1</li>
  <li>按钮2</li>
  <li>按钮3</li>
 </ul>
</div>
Copier après la connexion

2.js

// 添加contextmenu事件
 var right = document.getElementById("right");
 EventUtil.addEventListener(right, "contextmenu", function(event) {
 event = EventUtil.getEvent(event);
 EventUtil.preventDefault(event);
 var menu = document.getElementById("menu");
 
 // 获取鼠标右击时的坐标,并设置上下文菜单出现位置
 page = EventUtil.getPagePosition(event); 
 menu.style.left = page.pageX + "px";
 menu.style.top = page.pageY + "px";
 menu.style.visibility = "visible";
 });
 
 // 添加隐藏上下文菜单事件
 EventUtil.addEventListener(document, "click", function(event) {
 var menu = document.getElementById("menu");
 menu.style.visibility = "hidden";
 });
Copier après la connexion

L'EventUtil qui apparaît dans le code est présenté dans cet article : "Comment utiliser les écouteurs d'événements et les objets d'événement multi-navigateurs js"

Ce qui précède représente l'intégralité du contenu de cet article. Je vais vous apprendre à afficher le menu contextuel en js. J'espère que cela vous sera utile pour votre apprentissage.

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal