11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Onclick vs oncontextmenu

connecté
Bonsoir à tous
Je voudrais pour certains éléments du DOM effectuer une action sur un clic droit de la souris.

Sur les deux navigateurs qui m'intéressent (FireFox et Chrome) un clic droit sur un élément affiche un menu contextuel.
Je n'ai pas trouvé comment faire en sorte que -- pour ces éléments -- le menu contextuel soit désactivé. J'ai donc utilisé l'évènement "oncontextmenu" qui fonctionne correctement, mais je préfèrerais pouvoir utiliser "onclick" et tester le bouton par event.which

Je suppose que je n'ai pas su utiliser correctement event.preventDefault(): quand on appelle cette fonction, c'est qu'on est déjà dans le traitement de "oncontextmenu".
Pourriez vous me dire comment faire?
Merci de votre aide
Modérateur
PapyJP a écrit :
Je voudrais pour certains éléments du DOM effectuer une action sur un clic droit de la souris.


mauvaise idée.... Ce n'est pas habituel comme interface dans le web. Ça veut dire que tu va te casser la tête à coder un truc que seul toi utiliseras dans ton interface.

Aussi, sur une tablette ou mobile, le clique droit n'existe pas.....

Toujours faire simple, c'est souvent largement plus efficace.

<<<EDIT
Ce que tu peux faire, au clic/mouseover, tu affiches une tooltip avec à l'intérieur ton/tes option/s
EDIT;
Modifié par niuxe (09 Sep 2017 - 23:42)
connecté
Merci de ta réponse
Il s'agit d'une application d'administration du site avec seulement deux utilisateurs qui savent de quoi il s'agit.
L'utilisation du click droit, qui affiche effectivement un menu contextuel, est donc tout à fait approprié. C'est comme pour une application locale sur PC: clic droit affiche le menu contextuel, clic gauche effectue l'action par défaut.
Ma question est plutôt de nature "curiosité technique", j'aimerais savoir s'il est possible de désactiver le menu contextuel AVANT le traitement de "oncontextmenu", de façon à pouvoir utiliser le bouton droit de la souris à d'autres fins, sachant que dans ce cas particulier oncontextmenu est parfaitement approprié.
Modérateur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            background: navy;
        }
    </style>
</head>
<body>
    <div id="cible"></div>
</body>
</html>




window.addEventListener('DOMContentLoaded', function(){
    document.addEventListener('mouseup', function(e){
        if(e.target === document.querySelector('#cible') && e.button === 2){
            alert('le bouton droit a été cliqué dans le div');
        }
    });
    window.addEventListener('contextmenu', function(e){
        e.preventDefault();
    });
});


Vérifier que ça passe dans tous les navigateurs. Dans le cas échéant, voir avec les clef which ou button de la variable event.
Modifié par niuxe (10 Sep 2017 - 18:30)
connecté
Merci de ta réponse
SI je comprends bien, ça repose sur le fait que "oncontextmenu" est déclenchés après "mouseup"?
Il faut que je pense à regarder dans quel ordre les évènements sont déclenchés dans les divers navigateurs.
Modérateur
PapyJP a écrit :

SI je comprends bien, ça repose sur le fait que "oncontextmenu" est déclenchés après "mouseup"?

Non, c'est la méthode preventDefault() qui annule le comportement. Je l'ai mis après pour éviter des bogues de comportement. Toujours se méfier de cette méthode....
Modifié par niuxe (10 Sep 2017 - 23:07)
A noter que oncontextmenu a l'avantage sur onclick qu'il fonctionne aussi sur pression de la touche application ou la combinaison Maj+F10.
Au niveau accessibilité ça peut être important.
connecté
Merci de vos réponses
J'avais d'abord pensé à utiliser un onclick et tester le bouton, mais -- du moins dans les cas qui me préoccupent actuellement -- il s'agit bien de créer un menu contextuel, et en pratique je ne pense pas avoir besoin du bouton droit pour autre chose, ne serait-ce que pour ne pas perturber les ... deux utilisateurs de cette appli d'administration (dont moi-même) Smiley cligne
Sujet clos
Aller à