270 votes

Comment capturer l'événement de clic droit en JavaScript ?

Je veux bloquer les menus contextuels standard et gérer manuellement l'événement de clic droit.

Comment cela se fait-il ?

8 votes

@systempuntoout Non, c'est une question différente. L'autre question veut "bloquer le clic droit sans utiliser de javascript", cette question veut simplement l'étendre avec des fonctionnalités (beaucoup de sites le font sans ennuyer les utilisateurs avec succès, par exemple Google docs).

0 votes

Je suggère d'utiliser <a href=" jquery.com/">JQuery</a >, <a href=" beckelman.net/post/2008/11/04/ un exemple</a>

2 votes

@Bobobobo : C'est exact. Je vise l'extension de l'interface utilisateur, pas la restriction.

401voto

Chase Points 1052

Utilisez le oncontextmenu événement.

Voici un exemple :

<div oncontextmenu="javascript:alert('success!');return false;">
    Lorem Ipsum
</div>

Et en utilisant des écouteurs d'événements (crédit à rampion de un commentaire en 2011 ) :

el.addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
    alert('success!');
    return false;
}, false);

N'oubliez pas de retourner false, sinon le menu contextuel standard s'affichera toujours.

Si vous comptez utiliser une fonction que vous avez écrite plutôt que javascript:alert("Success!") n'oubliez pas de renvoyer false à la fois dans la fonction et dans l'option oncontextmenu attribut.

1 votes

Super code +1, j'ai même trouvé un moyen plus mince aussi. 'oncontextmenu="chatMenu(event)" puis juste utiliser e.preventDefault(e) en le passant dans le chatMenu :D De cette façon, le ;return false ; n'a pas besoin d'être passé pour chaque nouvel élément (disons pour les journaux de chat ou autre)

8 votes

Cela permet de gérer uniquement le clic droit. Si vous voulez un gestionnaire d'événement pour tous les types de clics, utilisez le code ci-dessus en conjonction avec le suivant : var onMousedown = function (e) { if (e.which === 1) {/*Left Mouse*/} else if (e.which === 3) {/*Right Mouse*/} /*etc.*/ }; clickArea.addEventListener("mousedown", onMousedown); L'écouteur du menu contextuel laissera passer l'événement de clic droit. Gardez à l'esprit que sur Mac FF ctrl+clic droit sera considéré comme un clic gauche de la souris, mais sur Mac Chrome ctrl+clic droit se fera par un clic droit de la souris.

1 votes

Une valeur de retour manquante ne serait-elle pas également évaluée à false ?

40voto

cyber-guard Points 1179

Je pense que vous cherchez quelque chose comme ça :

   function rightclick() {
    var rightclick;
    var e = window.event;
    if (e.which) rightclick = (e.which == 3);
    else if (e.button) rightclick = (e.button == 2);
    alert(rightclick); // true or false, you can trap right click here by if comparison
}

( http://www.quirksmode.org/js/events_properties.html )

Et ensuite utiliser le onmousedown même avec la fonction rightclick() (si vous voulez l'utiliser globalement sur toute la page vous pouvez faire ceci <body onmousedown=rightclick(); >

4 votes

Je pense que tu voulais dire if ((e.which && e.which == 3) || (e.button && e.button == 2)) .

12 votes

Ou juste (e.which === 3 || e.button === 2)

1 votes

C'est de la vieille école, mais ça marche presque partout.

-1voto

bobobobo Points 17477

Je suggère d'utiliser JQuery , Voici un exemple

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X