Comment se connecter au menu contextuel de l'événement d'un navigateur

Question

Je ne cesse de m'interroger, je ne trouve pas de menu contextuel qui fonctionnera pour moi. Peut-être que quelqu'un peut aider?

Voilà ce que je dois contextMenu à ajouter:

<ul id="list_{id}" class="list"> 
    <li id="Item_{id}"><a ondblclick=""><span>{title}</span></a></li> 
</ul> 

Ceci est la liste dynamique, il ajoutera beaucoup d'autres d'entre eux sur la page et les différents en donnant différents les ID. J'ai donc besoin d'un contextMenu qui sera ajouté à chaque liste mais pour chaque liste un contextMenu unique. Fondamentalement différentes instances de contextMenu dans chaque liste, en ajoutant dynamique {id} tag à l'ID de contextMenu ou quelque chose comme ça.

Merci

Answer 1

Il est un peu difficile de dire ce que vous demandez, mais si vous voulez accrocher dans l'événement « du menu contextuel » d'un navigateur, vous accrochez l'événement contextmenu et faire tout ce que vous êtes va faire (ce qui pourrait inclure la création d'un div, par exemple, avec des options dessus   — par exemple, votre propre menu contextuel). Vous pouvez soit le faire sur les listes elles-mêmes, individuellement, via getElementById comme vous l'avez indiqué dans votre question, ou vous pouvez le faire en accrochant l'événement sur un conteneur qui contient toutes les listes, puis déterminer quand l'événement est déclenché la liste a été déclenchée ("délégation d'événement").

Voir la fin de cette réponse pour l'approche de délégation d'événement. Mais en supposant que vous avez un moyen de connaître les ID réels utilisés et que vous voulez accrocher chaque liste spécifiquement pour une raison quelconque:

HTML:

<ul id='list_1'> 
    <li>List 1 item 1</li> 
    <li>List 1 item 2</li> 
</ul> 
<ul id='list_2'> 
    <li>List 2 item 1</li> 
    <li>List 2 item 2</li> 
</ul> 

JavaScript:

hookEvent(document.getElementById('list_1'), 'contextmenu', function(event) { 
    event = event || window.event; 
    if (event.preventDefault) { 
    event.preventDefault(); 
    } 
    display("List 1 context menu"); 
    return false; 
}); 
hookEvent(document.getElementById('list_2'), 'contextmenu', function(event) { 
    event = event || window.event; 
    if (event.preventDefault) { 
    event.preventDefault(); 
    } 
    display("List 2 context menu"); 
    return false; 
}); 

function hookEvent(element, event, handler) { 
    if (element.addEventListener) { 
    element.addEventListener(event, handler, false); 
    } 
    else if (element.attachEvent) { 
    element.attachEvent('on' + event, handler); 
    } 
    else { 
    element['on' + event] = handler; 
    } 
} 

Live example

Notez que seuls certains navigateurs (la plupart) vous permettent d'annuler le menu contextuel par défaut.

---

Mise à jour: Re votre "mais si l'ID est bindable?" question ci-dessous: Je crains de ne pas savoir ce que vous entendez par "bindable"   — aucune des balises sur votre question n'indique une technologie de gabarit spécifique. Vous n'avez même pas mentionné si le modèle se passe côté serveur ou côté client, ce qui le rend difficile à aider. Mais fondamentalement, au moment où le JavaScript est en cours d'exécution, il y aura de vrais ID sur les éléments réels dans le document. Vous devrez savoir ce que ces ID sont pour utiliser getElementById.

côté serveur templating:

Si ces ID vont être complètement dynamique et le modèle est géré sur le serveur, vous pouvez inclure un petit peu de script qui passe ces ID à JavaScript. Par exemple, près du haut de votre document, vous pourriez avoir:

<script type='text/javascript'> 
var mySpecialListIDs = []; 
</script> 

...puis mettez à jour votre modèle pour ajouter une petite étiquette script chaque fois qu'il est élargi:

<ul id="list_{id}" class="list"> 
    <li id="Item_{id}"><a ondblclick=""><span>{title}</span></a></li> 
</ul> 
<script type='text/javascript'> 
mySpecialListIDs.push("{id}"); 
</script> 

Ensuite, votre code côté client peut boucle à travers mySpecialLitIDs et utiliser chaque ID lors du branchement du gestionnaire.

templating côté client:

Si le templating est fait côté client, cela devient un peu plus simple: Il suffit de configurer votre liste mySpecialListIDs à un endroit pratique dans votre script côté client, et ajouter à chaque fois que vous appelez le moteur de modélisation.

---

Délégation événement: Que vous faites ou server- templating côté client, si vous allez avoir des listes dynamiques comme celui-ci, parfois délégation d'événements est la meilleure façon de le gérer. L'événement contextmenu (comme la plupart, mais pas tous, les événements) bulles jusqu'à la DOM. Donc, si vous le connectez à un élément ancêtre (quelque chose qui contient toutes vos listes, comme le corps du document lui-même ou quelque chose de ce genre), vous pouvez voir quelle liste a été cliquée en examinant l'objet événement. Comme ceci:

HTML:

<div id='list_container'> 
    <ul id='list_1'> 
    <li>List 1 item 1</li> 
    <li>List 1 item 2</li> 
    </ul> 
    <ul id='list_2'> 
    <li>List 2 item 1</li> 
    <li>List 2 item 2</li> 
    </ul> 
</div> 

JavaScript (en utilisant la fonction hookEvent ci-dessus):

// Hook up the contextmenu event on the container, not 
// on each list: 
hookEvent(document.getElementById('list_container'), 
      'contextmenu', 
      handleListContextMenu); 

// Our handler function 
function handleListContextMenu(event) { 
    var target; 

    // Handle IE-vs-the-world difference 
    event = event || window.event; 

    // Find out what the actual target element clicked was 
    target = event.target || event.srcElement; 

    // See if it or an ancestor of it is one of our lists 
    while (target && 
     (target.tagName !== "UL" || !target.id || target.id.substring(0, 5) !== "list_")) { 
    target = target.parentNode; 
    } 

    // Did we find a list? 
    if (target) { 
    // Yes, handle this. 
    if (event.preventDefault) { 
     event.preventDefault(); 
    } 
    display("List '" + target.id + "' context menu"); 
    return false; 
    } 
} 

Live example