Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Prb menu contextuel

8 réponses
Avatar
Pierre Goiffon
Bonjour,

Suite à l'accord de son auteur je fais quelques tests d'intégration d'un
menu contextuel au sein d'une application en ligne. Ca fonctionne plutôt
bien ! Cependant, je rencontre un petit prb sous IE...

Voir l'exemple ici :
<http://pgoiffon.free.fr/_temp/datagrid_20060731.html>

Si l'on fais un clic droit au-dessus du tableau, alors le menu apparait.

Afin de ne pas perturber les utilisateurs qui n'ont pas l'habitude d'un
menu contextuel sur des pages Web, un bouton "actions" est présent en
tête de page. Sur MSIE, un clic gauche sur ce bouton fais bien
apparaitre le menu... mais le fais disparaitre aussitôt ! Sur Firefox le
menu reste bien affiché que l'on clique sur le bouton avec le bouton
gauche ou droit.

La cause est liée à cette ligne dans la fonction chargée sur onLoad :
document.body.onclick = hideMenu;

Sur IE, ce onClick est propagé visiblement aussi au bouton... Comment
faire en sorte que lors du clic avec le bouton gauche sur le bouton
actions le menu contextuel reste affiché ?
J'ai essayé différentes choses, en particulier d'utiliser la propriété
fromElement dans la fonction hideMenu, mais sans succès... Heeeeeeeelp !!!

8 réponses

Avatar
O.L.
Bonjour,

Suite à l'accord de son auteur je fais quelques tests d'intégration d'un menu
contextuel au sein d'une application en ligne. Ca fonctionne plutôt bien !
Cependant, je rencontre un petit prb sous IE...

Voir l'exemple ici :
<http://pgoiffon.free.fr/_temp/datagrid_20060731.html>

Si l'on fais un clic droit au-dessus du tableau, alors le menu apparait.

Afin de ne pas perturber les utilisateurs qui n'ont pas l'habitude d'un menu
contextuel sur des pages Web, un bouton "actions" est présent en tête de
page. Sur MSIE, un clic gauche sur ce bouton fais bien apparaitre le menu...
mais le fais disparaitre aussitôt ! Sur Firefox le menu reste bien affiché
que l'on clique sur le bouton avec le bouton gauche ou droit.

La cause est liée à cette ligne dans la fonction chargée sur onLoad :
document.body.onclick = hideMenu;

Sur IE, ce onClick est propagé visiblement aussi au bouton... Comment faire
en sorte que lors du clic avec le bouton gauche sur le bouton actions le menu
contextuel reste affiché ?


Essaie en ajoutant une ligne après
document.getElementById("bouton_actions").onmousedown =
showContextualMenuBtn;

La ligne serait un truc du genre :
document.getElementById("bouton_actions").onclick = function()
{window.event.cancelBubble=true;return false;};

Mais il faudrait l'adapter pour FireFox pour bien faire, avec un code
spécial FF qui utiliserait myEvent.preventDefault() (de mémoire), avec
myEvent qui est l'objet event passé en paramètre du onclick par le
navigateur (function(myEvent){...})

@+

--
Olivier Ligny
Créateur web free-lance / www.cyber-tamtam.net

Avatar
O.L.
PS : tu devrais réactiver l'affichage des erreurs JavaScript sur ton
IE, moi j'en ai à chaque clic dans le tableau !
Pour le débogage, ça aide ...

--
Olivier Ligny
Créateur web free-lance / www.cyber-tamtam.net
Avatar
Pierre Goiffon
O.L. wrote:
<http://pgoiffon.free.fr/_temp/datagrid_20060731.html>

Si l'on fais un clic droit au-dessus du tableau, alors le menu apparait.

Afin de ne pas perturber les utilisateurs qui n'ont pas l'habitude
d'un menu contextuel sur des pages Web, un bouton "actions" est
présent en tête de page. Sur MSIE, un clic gauche sur ce bouton fais
bien apparaitre le menu... mais le fais disparaitre aussitôt !


Essaie en ajoutant une ligne après
document.getElementById("bouton_actions").onmousedown =
showContextualMenuBtn;

La ligne serait un truc du genre :
document.getElementById("bouton_actions").onclick = function()
{window.event.cancelBubble=true;return false;};


C'est parfait, ça solutionne le prb complètement ! Et Firefox ne bronche
pas avec cette nouvelle ligne...

Par contre, j'aimerai bien comprend la signification de cet ajout... ?


Avatar
O.L.
O.L. wrote:
<http://pgoiffon.free.fr/_temp/datagrid_20060731.html>

Si l'on fais un clic droit au-dessus du tableau, alors le menu apparait.

Afin de ne pas perturber les utilisateurs qui n'ont pas l'habitude d'un
menu contextuel sur des pages Web, un bouton "actions" est présent en tête
de page. Sur MSIE, un clic gauche sur ce bouton fais bien apparaitre le
menu... mais le fais disparaitre aussitôt !


Essaie en ajoutant une ligne après
document.getElementById("bouton_actions").onmousedown =
showContextualMenuBtn;

La ligne serait un truc du genre :
document.getElementById("bouton_actions").onclick = function()
{window.event.cancelBubble=true;return false;};


C'est parfait, ça solutionne le prb complètement ! Et Firefox ne bronche pas
avec cette nouvelle ligne...


Euh ça, ça m'étonne un peu, t'es sûr d'avoir bien regardé dans la
console si FF ne hurle pas des erreurs en rouge ? ;)

Par contre, j'aimerai bien comprend la signification de cet ajout... ?


C'est simple on définit l'événement "onclick" de ton bouton, en lui
attribuant une fonction qui s'exécutera lors du clic sur le bouton :

window.event.cancelBubble=true;
=> demande l'arrêt de la remontée des bulles, c'est à dire l'arrêt de
la propagation de l'évenement [clic de souris] aux éléments parents du
bouton (jusqu'au BODY qui a un script pour cet événement qu'il faut
éviter de déclencher).
En bref, on demande au navigateur de ne pas s'occuper des autres
"onclick", notamment celui qui faisait que ton menu se cachait tout de
suite.

return false;
=> je sais pas si c'est réellement utile mais ça fait joli :)

--
Olivier Ligny
Créateur web free-lance / www.cyber-tamtam.net



Avatar
Pierre Goiffon
O.L. wrote:
PS : tu devrais réactiver l'affichage des erreurs JavaScript sur ton IE,
moi j'en ai à chaque clic dans le tableau !
Pour le débogage, ça aide ...


Hahu ? Je n'ai rien désactivé à ma connaissance, l'IE que j'ai ici ne
m'indique rien du tout... Est-ce que je pourrais avoir plus de détails ?

Par ailleurs j'étais persuadé tout à l'heure d'avoir mis la page en
ligne à jour et en fait... non. Désolé, je m'étais embrouillé dans les
fichiers. Bref la même page avec l'ajout est toujours visible à la même
URL :
http://pgoiffon.free.fr/_temp/datagrid_20060731.html

Avatar
O.L.
O.L. wrote:
PS : tu devrais réactiver l'affichage des erreurs JavaScript sur ton IE,
moi j'en ai à chaque clic dans le tableau !
Pour le débogage, ça aide ...


Hahu ? Je n'ai rien désactivé à ma connaissance, l'IE que j'ai ici ne
m'indique rien du tout... Est-ce que je pourrais avoir plus de détails ?


Les erreurs ont disparu !
Je ne sais pas ce que tu as fait, mais maintenant tout est RAS :)
Sinon les erreurs apparraissaient, et pour toi tu devais avoir une
icône jaune dans la barre d'état à gauche, un dbl clic dessus et ça
t'affiche des détails.

Par ailleurs j'étais persuadé tout à l'heure d'avoir mis la page en ligne à
jour et en fait... non. Désolé, je m'étais embrouillé dans les fichiers. Bref
la même page avec l'ajout est toujours visible à la même URL :
http://pgoiffon.free.fr/_temp/datagrid_20060731.html


Pour info, avec FireFox tu risques d'avoir du mal à remplacer le menu
contextuel ... en général FF affiche toujours son menu, par dessus le
tien fait en DHTML.

--
Olivier Ligny
Créateur web free-lance / www.cyber-tamtam.net


Avatar
Florian Sinatra
*O.L.* @ 31/07/2006 19:49 :

Pour info, avec FireFox tu risques d'avoir du mal à remplacer le menu
contextuel ... en général FF affiche toujours son menu, par dessus le
tien fait en DHTML.


Exactement. C'est la case "Désactiver ou remplacer les menus
contextuels" des "Paramètres Javascript avancés". Je crois que par
défaut, elle est activée, mais sitôt son existence connue je pense que
beaucoup la désactivent. Et lorsque c'est le cas, c'est très moche.
C'est comme de vouloir colorer les scrollbars, ou de vouloir ouvrir une
nouvelle fenêtre. Les utilisateurs un tant soit peu avancés ne veulent
pas qu'on touche à leur interface. Et c'est bien normal. Si ton client a
des besoins privés, fais ça en XUL ;-).

Avatar
Pierre Goiffon
O.L. wrote:
PS : tu devrais réactiver l'affichage des erreurs JavaScript sur ton
IE, moi j'en ai à chaque clic dans le tableau !


Hahu ? Je n'ai rien désactivé à ma connaissance, l'IE que j'ai ici ne
m'indique rien du tout... Est-ce que je pourrais avoir plus de détails ?


Les erreurs ont disparu !
Je ne sais pas ce que tu as fait, mais maintenant tout est RAS :)


Je suis assez certain de ne rien avoir changé ormis l'ajout de la ligne
avec cancelBubble...
Et je confirme que je n'avais bien aucune erreur remontée par MSIE ! (et
aucune dans la console de Firefox non plus)

Pour info, avec FireFox tu risques d'avoir du mal à remplacer le menu
contextuel ... en général FF affiche toujours son menu, par dessus le
tien fait en DHTML.


Comme l'a déjà répondu Florian Sinatra, c'est une option qui doit être
activée sur votre Firefox, et qui ne l'est pas par défaut (nous en
avions parlé précédemment, voir le message
<e6k4he$10ig$)

J'ai bien conscience de la chose, et ça ne devrais pas être génant.
Cependant je me demandais s'il est possible d'une manière ou d'une autre
de désactiver ce blocage sur un site en particulier, et je n'ai pas
réussi à trouver la réponse (même en postant sur le groupe
f.c.i.w.navigateurs)