Manipuler le bouton droit de la souris, cliquez sur (oncontextmenu). Menu contextuel personnalisé utilisant JavaScript Pourquoi le bouton droit de la souris n'ouvre-t-il pas le menu

Avez-vous remarqué que le clic droit sur les images de certains sites ne fonctionne pas. Il semble que le bouton clique au ralenti et que le navigateur ne s'en soucie pas - «se bloque et réfléchit». En réalité, le navigateur bloque simplement les clics lorsqu'il reçoit une telle commande du script JavaScript de la page chargée.

Comment déverrouiller le bouton droit, de sorte qu'en cliquant sur l'image, enregistrez-la pour la visualisation hors ligne? Dans la plupart des navigateurs Internet, il suffit de "creuser" dans les paramètres avancés JavaScript .. Alors…

Si tu as " Opéra»:
1. Suivez le chemin "Outils" -\u003e "Paramètres généraux";
2. Dans la fenêtre qui apparaît, arrêtez-vous à l'élément "Contenu" et trouvez le bouton "Configurer JavaScript" (voir Figure 1).

3. En cliquant dessus, ouvrez la fenêtre des paramètres JavaScript détaillés et décochez la case à côté de la ligne "Bloquer le bouton droit".
Après confirmation (en cliquant sur "Ok") ce bouton deviendra "gratuit" pour les appels vers le menu contextuel. Au fait, dans " Firefox»Pour déverrouiller le bouton droit, vous devez décocher la case à côté d'un tel élément (voir Fig. 2).

Dans d'autres navigateurs avancés, le blocage du bouton droit est supprimé de la même manière - via les mêmes paramètres JavaScript avancés.

Objectif: attraper le clic droit de la souris dans la fenêtre du navigateur et afficher son propre menu contextuel.

Que se passe-t-il lorsque vous cliquez avec le bouton droit dans une fenêtre de navigateur? Un menu contextuel apparaîtra, dont l'apparence et l'ensemble des fonctions dépendront du type de navigateur et de l'endroit où vous avez cliqué.
Mais que se passerait-il si nous voulions bloquer le menu contextuel du navigateur et afficher le nôtre? Peut être? Oui. Malheureusement pas multi-navigateurs, mais le code ci-dessous fonctionnera dans Gecko, Safari et IE. Opera ne fournit pas ces fonctionnalités par défaut.

Tout d'abord, dessinons trois DIV, dans 2 desquels nous montrerons notre propre menu contextuel, et dans le troisième nous laisserons le navigateur par défaut.

"hauteur: 100px; bordure: 1px rouge uni; couleur d'arrière-plan: #FFCCCC;"> Clic-droit

"hauteur: 100px; bordure: 1px bleu uni; couleur d'arrière-plan: #CCCCFF;"> Clic-droit

"hauteur: 100px; bordure: 1px vert uni; couleur d'arrière-plan: #CCFFCC;"> Clic-droit


"position: absolue; haut: 0; gauche: 0; bordure: 1px solide # 666; couleur d'arrière-plan: #CCC; affichage: aucun; flottant: gauche;">


Comme vous pouvez le voir, le clic droit du bouton se produit en utilisant l'événement oncontextmenu... Pour écrire le code de la fonction de menu, vous avez besoin des composants suivants:
- Fonction d'ajout de gestionnaires d'événements. Utilisé pour masquer son propre menu contextuel lors d'un clic dans d'autres parties du document.
- Fonction de détermination des coordonnées du pointeur de la souris. Utilisé pour définir la position dans laquelle nous afficherons le menu contextuel.
Vous pouvez bloquer la fenêtre contextuelle du menu standard du navigateur en renvoyant simplement false.

Maintenant le code:

// Fonction de détermination des coordonnées du pointeur de la souris
function defPosition (événement) (
var x \u003d y \u003d 0;
if (document.attachEvent! \u003d null) (// Internet Explorer et Opera
x \u003d window.event .clientX + (document.documentElement .scrollLeft? document.documentElement .scrollLeft: document.body .scrollLeft);
y \u003d window.event .clientY + (document.documentElement .scrollTop? document.documentElement .scrollTop: document.body .scrollTop);
) else if (! document.attachEvent && document.addEventListener) (// Gecko
x \u003d event.clientX + window.scrollX;
y \u003d event.clientY + window.scrollY;
) autre (
// Ne fais rien
}
retour (x: x, y: y);
}

menu de fonction (type, evt) (
// Bloque le bouillonnement de l'événement contextmenu
evt \u003d evt || window.event;
evt.cancelBubble \u003d true;
// Afficher notre propre menu contextuel
var menu \u003d document.getElementById ("contextMenuId");
var html \u003d "";
commutateur (type) (
cas 1):
html \u003d "Menu pour la première DIV";
html + \u003d "
Première fonction "
;
html + \u003d "
Deuxième fonction "
;
html + \u003d "
Troisième fonction "
;
pause;
étui (2):
html \u003d "Menu pour la deuxième DIV";
html + \u003d "
(vide)" ;
pause;
défaut:
// Rien
pause;
}
// S'il y a quelque chose à montrer, montrez-le
si (html) (
menu.innerHTML \u003d html;
menu.style .top \u003d defPosition (evt) .y + "px";
menu.style .left \u003d defPosition (evt) .x + "px";
menu.style .display \u003d "";
}
// Bloquer la pop-up du menu standard du navigateur
retourner faux;
}

// Ferme le contexte lors d'un clic gauche ou droit sur le document
// Fonction d'ajout de gestionnaires d'événements
function addHandler (objet, événement, gestionnaire, useCapture) (
if (object.addEventListener) (
object.addEventListener (événement, gestionnaire, useCapture? useCapture: false);
) else if (object.attachEvent) (
object.attachEvent ("on" + événement, gestionnaire);
) autre alerte ( "Ajouter un gestionnaire n'est pas pris en charge") ;
}
addHandler (document, "menu contextuel", fonction () (

} ) ;
addHandler (document, "clic", fonction () (
document.getElementById ("contextMenuId") .style .display \u003d "aucun";
} ) ;

Dans ce tutoriel, nous allons jeter un œil à l'astuce HTML5 rarement mentionnée - contextmenu. Vous n'avez peut-être jamais entendu parler d'un tel menu auparavant, mais dans certaines situations, il peut être extrêmement utile.

À quoi peut servir l'attribut contextmenu? Il vous permet d'ajouter diverses options au menu contextuel de votre navigateur avec seulement quelques lignes de code HTML, même lorsque Javascript est désactivé. Bien que pour le moment, un outil aussi pratique ne soit disponible que dans Firefox.

Voilà comment cela fonctionne:

L'utilisation du menu contextuel est beaucoup plus facile qu'il n'y paraît à première vue. Vous devez ajouter l'attribut contextmenu:

Ensuite, nous créons le menu:

L'attribut id doit correspondre à l'attribut contextmenu. Ainsi, il est possible d'utiliser différents menus contextuels pour différentes parties de la page.

Ensuite, nous ajoutons des éléments de menu. Tout d'abord, insérez un élément de menu avec du texte et une icône, puis ajoutez un lien pour diffuser la page actuelle sur Facebook, et enfin insérez un lien pour actualiser la page. Il s'avère un menu contextuel avec trois éléments:

Vous pouvez également créer des sous-menus:

Une propriété HTML5 très intéressante et utile. Mais, son utilisation est limitée uniquement au navigateur Firefox.

Le menu contextuel est le menu qui apparaît lorsque vous cliquez avec le bouton droit de la souris sur l'écran. En règle générale, ces menus sont utilisés pour faciliter l'exécution des actions sélectionnées, telles que le tri des dossiers et des fichiers, l'ouverture d'une nouvelle fenêtre d'application ou l'accès aux paramètres système.

Pendant de nombreuses années, le terme «menu contextuel» se réfère principalement aux applications natives. Cependant, nous avons maintenant la possibilité d'en profiter également dans les applications Web. Un exemple est le gestionnaire de fichiers dans Gmil. Ce menu est implémenté à l'aide de code javascript:

À l'avenir, nous aurons la possibilité de créer des menus contextuels pour les sites HTML5. Nous vous invitons à vous familiariser avec cette approche.

Développement d'un menu contextuel

HTML5 nous a présenté 2 nouveaux éléments, menu et menuitem, et ils vous permettent de créer des menus contextuels. Pour que le navigateur traite l'élément de menu comme un "menu contextuel", nous devons définir le type de menu sur context, et lui attribuer également un identifiant unique.

Voici un exemple dans lequel nous créons un menu contextuel avec ces propriétés.


Modifier le contenu
Sélection de courrier électronique

Nous avons également la possibilité d'ajouter des sous-menus en forçant l'élément de menu comme suit:


Modifier le contenu
Sélection de courrier électronique

Facebook
Twitter


Maintenant, pour que le menu contextuel apparaisse à l'écran lors d'un clic droit, nous utilisons un nouvel attribut HTML appelé contextmenu. Cet attribut est utilisé pour identifier le menu avec l'ID spécifié. Compte tenu de notre exemple ci-dessus, nous pouvons définir notre menu contextuel avec contextmenu \u003d context-menu-id.

Nous pouvons définir un attribut sur la balise body si nous voulons utiliser le menu contextuel dans toute la page. Nous pouvons également l'ajouter à un élément HTML afin que ce menu soit utilisé exclusivement dans cet élément.

Un nouveau menu contextuel apparaîtra désormais dans le menu Système d'exploitation, comme le montre l'exemple ci-dessous.


Ajouter une icône

Nous sommes sûrs que beaucoup d’entre vous ont vu des menus contextuels qui utilisent des icônes. Dans certains cas, une icône peut être une excellente aide visuelle pour aider les utilisateurs à trouver des menus. En outre, il donne également aux utilisateurs la possibilité de comprendre à quoi sert le menu.


Nous pouvons également ajouter une icône à notre menu contextuel HTML5 en utilisant l'attribut icon:


Modifier le contenu
Sélection de courrier électronique

Facebook
Twitter


C'est ce que nous verrons dans la fenêtre du navigateur.


Faire fonctionner le menu

À ce stade, notre nouveau menu contextuel ne fonctionnera pas lorsque vous cliquez dessus. Cependant, on peut très facilement le ramener à la raison avec un petit code javascript. Dans notre exemple, le menu s'appelle Email Selection. Ce menu permet aux utilisateurs d'envoyer le texte sélectionné par e-mail.

Pour que cela fonctionne, ajoutons une fonction qui permet aux utilisateurs d'utiliser le code-behind.

Fonction getSelectedText () (
var text \u003d "";
if (window.getSelection) (
text \u003d window.getSelection (). toString ();
) else if (document.selection && document.selection.type! \u003d "Contrôle") (
text \u003d document.selection.createRange (). text;
}
texte de retour;
};
Ensuite, nous créons une autre fonction, supposons sendEmail (), qui ouvre un client de messagerie. Le sujet de la lettre sera le texte saisi à partir de l'en-tête du document et le corps de la lettre sera rempli avec le texte sélectionné.

Fonction sendEmail () (
var bodyText \u003d getSelectedText ();
window.location.href \u003d "mailto :? subject \u003d" + document.title + "& body \u003d" + bodyText + "";
};
Enfin, nous ajoutons cette fonctionnalité à notre menu via l'attribut onclick.

Sélection de courrier électronique
Nous vous avons déjà montré comment utiliser HTML5 EditableContent, qui nous permet de modifier le contenu Web directement sur la page. Nous pouvons utiliser cette fonctionnalité en l'ajoutant à notre menu appelé «Modifier le contenu».

En conclusion

Personnellement, nous sommes très satisfaits de cette nouvelle fonctionnalité. Nous y voyons de nombreuses possibilités. Malheureusement, au moment d'écrire ces lignes, seul Firefox prend en charge cette fonctionnalité. Espérons que d'autres navigateurs s'y connecteront bientôt.

Ci-dessous vous pouvez voir une démo (ne fonctionne que dans Firefox).

L'opérabilité de tous les appareils. En cas de pannes, de pannes, il n'est pas toujours nécessaire de faire appel à des spécialistes, payant leurs services parfois à des prix assez élevés. De nombreux défauts, erreurs peuvent être corrigés par vous-même. Ce genre de plantages, les erreurs incluent lorsque le bouton droit de la souris n'ouvre pas le menu contextuel. Que faire dans de tels cas?

Tout d'abord, vous devez savoir pourquoi l'échec se produit, pourquoi le menu contextuel de Windows 10 ne fonctionne pas. Il y a plusieurs raisons possibles ici:

  • registre encombré de fichiers obsolètes;
  • l'absence de programmes inclus dans le menu contextuel, leur travail instable.

Voyons quoi faire dans ces cas, comment changer la situation lorsque le menu contextuel ne s'ouvre pas avec le bouton droit de la souris.

Si le menu contextuel du clic droit n'apparaît pas parce que le registre est encombré de fichiers obsolètes, nous vous recommandons d'utiliser un utilitaire, par exemple, Glary Utilities, pour le nettoyage. Glary Utilities est un ensemble de tweakers système, des utilitaires qui aident à protéger, ajuster et améliorer les performances du PC. Avec l'aide de l'ensemble, vous pouvez supprimer les fichiers inutiles qui obstruent le système, les entrées de registre obsolètes depuis longtemps, optimiser la RAM, gérer le démarrage, optimiser la mémoire et d'autres fonctions utiles au bon fonctionnement de l'ordinateur. Glary Utilities est téléchargeable gratuitement.


Après avoir défini les paramètres, nettoyez votre appareil des fichiers inutiles à l'aide du même utilitaire, nettoyez le registre, augmentant ainsi la vitesse de l'ordinateur.

Correction d'un bug de gel

Si, lorsque vous cliquez avec le bouton droit sur un fichier, un dossier, le menu contextuel du bureau ne fonctionne pas, l'ordinateur se bloque, la touche ne répond pas aux commandes, vous pouvez éliminer ce gel de deux manières, nous vous recommandons de faire les deux dans l'ordre. Avant de procéder à l'un d'entre eux, vous devez disposer des droits d'administrateur. Vous devrez travailler avec le registre, ici vous devez faire attention, si vous faites quelque chose de mal, le système peut planter. Par conséquent, lorsque vous démarrez le processus de résolution des échecs, assurez-vous de créer un point de restauration système avant de supprimer quoi que ce soit.

Un blocage «terne» est généralement causé par un programme instable, un programme figé ou lorsqu'un lien dans le menu contextuel pointe vers une ressource inexistante.

Première méthode

Suivez les étapes dans l'ordre:



  1. Vérifiez la liste qui apparaît pour les programmes que vous avez déjà supprimés.
  2. S'il existe un programme dans la liste que vous avez supprimé, supprimez-le du Registre. Avant de supprimer une clé de registre, nous vous recommandons de créer une copie de sauvegarde de celle-ci pour l'enregistrer au cas où vous auriez besoin de la restaurer.

Deuxième méthode

L'algorithme de la deuxième méthode, lorsque le menu contextuel de Windows 10 ne s'ouvre pas, sera le suivant.

  1. Ouvrez l'éditeur de registre comme décrit aux étapes 1 à 2 de la méthode précédente.
  2. Ouvrez la sous-clé HKEY_CLASSES_ROOT,
  3. Là, vous verrez plusieurs sous-sections avec des noms comme "nom_programm.exe", "nom_programm.dll". Vérifiez chacun par un, en cliquant sur LMB, à la sous-section "commande". Toutes les sous-sections doivent s'ouvrir. S'il ne s'ouvre pas, recherchez le paramètre «NoOpenWith» dans la partie droite de la fenêtre. Il n'y a pas de tel paramètre - créez-le. Pourquoi faire ce qui suit:

  1. Après avoir trouvé la sous-section "commande", cliquez sur LMB, vérifiez la présence du paramètre "(Par défaut)" sur le côté droit. Le paramètre doit être enregistré pour l'application ou la ressource réseau existant sur l'ordinateur.
  • Si le paramètre fait référence à une ressource déjà manquante, la section entière commençant par le nom de cette ressource ou de ce programme doit être supprimée. N'oubliez pas de créer une copie de sauvegarde avant de supprimer pour restauration si nécessaire. Supprimer en cliquant sur le nom de la section avec le bouton droit de la souris, puis en cliquant sur «Supprimer» - «Oui».

Après avoir terminé les deux méthodes, le menu contextuel devrait s'ouvrir, le PC cessera de se figer lorsque RMB cliquera sur le fichier.

Il n'est pas difficile de faire fonctionner le menu contextuel, rappelez-vous simplement que toute tentative de modification du registre peut entraîner un fonctionnement instable du PC, alors n'oubliez pas de créer des points de restauration, d'archiver des copies des programmes à supprimer. Lorsque le bouton droit de la souris n'ouvre pas le menu contextuel, suivez les instructions ci-dessus dans l'ordre, appliquez toutes les méthodes, l'erreur sera corrigée.

Partagez ceci