Click droit de souris

Version imprimable

12/06/2009, 16h06
gabdeschenes

Click droit de souris

Bonjour,

j'ai une méthode en javascript qui est propre à un contrôle infragistics. Cette méthode me permet de capturer l'événement node click sur un treeView, mais elle doit recevoir en paramètre 3 argument, dont le button de la souris cliqué. Jusque là tout va bien, je cible parfaitement le bouton de droit de la souris et je fais afficher un message de type confirmation. Cependant, mon problème survient lorsque que l'utilisateur clique sur accepter, la fenêtre dialog disparait, mais juste après le menu contextuel de browser apparait (enregistrer l'image sous, etc...). Donc ma requête est: Comment puis-je enlever cette appararition de menu?

Merci pour l'aide future
Gabriel Deschênes
12/06/2009, 16h31
le_chomeur

Un morceau de code pour illustrer le problème serait le bienvenue :)
12/06/2009, 16h34
Lideln75

Oui, sans autre info, je dirais à priori : vérifier que tu empêches bien la propagation des événements.

Enfin j'avouerais ne pas avoir précisément ciblé le contexte, mais à première vue (sans autre détail donc), je penserais à vérifier ça en premier.

Merci pour les réponses. Voici ma fonction:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
function changeImageSelectionne(treeId, nodeId, button){
            var droite = document.getElementById("partieDroite");
            var imageViewer = $find('<%=WebImageViewer1.ClientID%>');
            var tree = igtree_getTreeById(treeId);
            var node =  igtree_getNodeById(nodeId);
            nodeIdFocus = node.getTag();
            var level = node.getLevel();
 
            if(button == 1)
            {
                alert(node.getIndex());
 
            }
            else if(button == 2) //C'est ici pour le bouton de droit
            {
                //tree.CancelPostBack();
                if(confirm("Voulez vous ajouter cette fonction à votre menu?"))
                {
                }
                else
                {
                    tree.CancelPostBack = true;
                }
            }
      }

En espérant que ça l'éveille une piste de solution.

Mais Lideln75 quand tu dis:

Citation:

vérifier que tu empêches bien la propagation des événements

J'ai une petite idée, mais peux-tu m'éclairer un peu?
Merci
Gabriel Deschênes

12/06/2009, 16h55
le_chomeur

tu dois bloquer le menu du click droit en fait ...

via un

Code:

window.oncontextmenu="return false;"

J'avais déjà essayé cette possibilité à deux endroit:

Code:

1
2
3
4
5
6
7
 
 else if(button == 2)
            {
                window.oncontextmenu="return false;" //Premiere endroit
                if(confirm("Voulez vous ajouter cette fonction à votre menu?"))
                {
                }

Code:

1
2
3
4
5
6
7
8
 
else if(button == 2)
            {
 
                if(confirm("Voulez vous ajouter cette fonction à votre menu?"))
                {
                          window.oncontextmenu="return false;" //Deuxieme endroit
                }

Mais le menu contextuel s'affiche toujours à la suite de la confirmation fait par l'utilisateur..... Je ne comprends pas pourquoi

Merci
Gabriel Deschênes

12/06/2009, 17h45
Lideln75

Où se trouve le code :
1) du menu contextuel (la fonction appelée dans le onclick)
2) de tous les endroits où cette fonction est appelée

?

A priori je serais tenté de dire que c'est un problème de propagation d'événement. Si oui il faut solidifier le code d'affichage du menu c'est-à-dire faire un return false dans la fonction qui gère le clic droit (mon 1) ci-dessus, donc à priori l'endroit où changeImageSelectionne est appelée).

Enfin, je pense ! :)

Premièrement le menu contextuel que je désire faire disparaitre, c'est le menu standard du browser lorsque tu click de droit n'importe où dans la page. Pour ce qui est de ma fonction, elle est appelé uniquement ici (dans mon tag de mon treeView):
Code:

1 2 3 4 5 6 <ignav:UltraWebTree ID="UltraWebTree1" runat="server" DefaultImage="" HiliteClass="" HoverClass="" Indentation="20" AllowDrag="True" Selectable="true" DataKeyOnClient="true"> <ClientSideEvents NodeClick="changeImageSelectionne" DragStart="dragDrop"/> </ignav:UltraWebTree>
Merci
Gabriel Deschênes

Je ne sais pas du tout comment fonctionne ton "ClientSideEvents", en fait.

Mais pour t'expliquer le principe :
Quand tu fais un listener sur un onclick, l'événement est propagé par défaut. Pour empêcher sa propagation, il faut faire "event.stopPropagation()" je crois.

Du genre (en jQuery) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <div id="container"> <div id="child"> </div> </div> <script type="text/javascript"> $(document).ready(function() { $('#container').click(function(e) { console.log('click on container'); }); $('#child').click(function(e) { console.log('click on child'); // Veut-on stopper la propagation de l'événement ? Si oui, faire : e.stopPropagation(); }); }); </script>
Si tu n'appelles pas e.stopPropagation() (comme dans ton problème actuel je pense), l'événement est propagé et du coup, tu loggeras 'click on child' suivi de 'click on container'.

Si tu appelles e.stopPropagation(), l'événement sera arrêté dans ta fonction et n'ira pas plus haut, du coup tu loggeras uniquement 'click on child'.

Voilà, j'espère que c'est plus clair ici. Le problème c'est que ta fonction changeImageSelectionne ne prend pas d'argument de type Event.
Par contre ton ClientSideEvents prend un pointeur sur fonction, donc peut-être qu'en passant par une fonction anonyme... Mais il n'y a rien de moins sûr, je pense...

Regarde l'API de ce que tu utilises, et vois s'il y a moyen d'obtenir l'objet Event et d'arrêter sa propagation.

Voilou, j'espère que ça aide !