Discussion :

[bourinator]

Bonjour à tous,

Désolé de poser une question si basique, mais j'ai cherché des exemples un peu partout et il doit y avoir quelque chose de tout bête qui m'échappe...

Je voudrais quand on clique sur une image faire telle ou telle action selon le bouton de la souris.
En résumé, mon code HTML ressemble à ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img id='mon_id' src='monimage.gif' onmousedown=mafonction()>

Quand je clique sur l'image, mafonction s'exécute bien. Seulement, je voudrais savoir quel bouton a été utilisé et c'est là qu'il doit me manquer quelque chose. J'utilise event ou plutôt essaie d'utiliser event.
Ma fonction ressemble à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
function mafonction(){
   monimage = document.getElementById('mon_id');
   bouton = monimage.event.button; //plante car monimage.event est "undefined"
 
}

J'ai essayé d'utiliser event sans monimage avant, mais plantage direct.
J'ai même essayé document.event, mais "undefined" aussi...

Encore une fois, désolé de poser une question si basique, mais ca m'échappe... Merci d'avance...

[k1rby]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<img src="http://www.absoluteanime.com/kirby/cook_kirby.gif" alt="kirby" id="img" />
 
<script type="text/javascript">
function mafonction(e){
	if ((!document.all && e.which==3) || (document.all && event.button==2)){
		//code pour le clic droit
	}
}
document.getElementById('img').onmousedown=mafonction;

Marche sous IE, FF, Safari, Chrome mais pas Opera

[danielhagnoul]

Bonsoir.

Voir : https://developer.mozilla.org/en/DOM/event.button

Because mouse clicks are frequently intercepted by the user interface, it may be difficult to detect buttons other than those for a standard mouse click (usually the left button) in some circumstances.

Users may change the configuration of buttons on their pointing device so that if an event's button property is zero, it may not have been caused by the button that is physically left–most on the pointing device; however, it should behave as if the left button was clicked in the standard button layout.

[emmanuel.remy]

Bonsoir,

Comme te le fait remarquer k1rby le souci principal vient déjà du fait que les navigateurs ne gèrent pas tous de la même façon les événements.
Ainsi la norme veut que si un événement est déclenché alors la fonction associée appelée se voit passer comme paramètre un objet Event. Or IE procède autrement: il dispose aussi d'un objet Event mais directement comme une propriété de l'objet window... Ce qui impose de faire le distingo et de l'inclure lors de l'écriture du code (javascript ou HTML). Ainsi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img id='mon_id' src='monimage.gif' onmousedown=mafonction()>

devra s'écrire ainsi si on veut accepter les différentes interprétations:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
//Note les guillemets autour de l'appel de la fonction
<img id="mon_id" src="monimage.gif" onmousedown="mafonction(event);" />

Maintenant ta fonction:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function mafonction(){
   monimage = document.getElementById('mon_id');
   bouton = monimage.event.button; 
 
}

D'après ce qu'on vient de voir, il faut changer l'appel et distinguer si c'est le modèle de IE ou du W3C qui s'applique . Note que mafonction est appelée depuis l'enfoncement du bouton, donc il n'y a pas besoin de repartir de monimage pour avoir les informations qui nous intéressent.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function mafonction(e){
  //code qui permet d'obtenir e comme un event commun à tous les navigateurs
  //peut aussi s'écrire ainsi: 
  //var e = e || window.event;

   if (!e) var e = window.event;
   
   //si tu veux le clic droit
   if (e.button==2){
      //code pour le clic droit 
      alert('clic droit');
   }
}

Concernant les "numéros" des boutons, là encore c'est un peu l'anarchie:
- IE: 0 = pas de bouton, 1 = gauche, 2 = droit, 4 = milieu, puis combinaison de ces valeurs (ex: 5 = gauche + milieu)
- W3C (Firefox, Safari, Opera > 8b): 0 = gauche , 1 = milieu, 2 = droit
- Opera <8b: 1 = gauche , 2 = droit, 3 = milieu

Enfin toujours comme te le fait remarquer k1rby, un code alternatif pour associer l'événement peut être celui-ci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<img src="http://www.absoluteanime.com/kirby/cook_kirby.gif" alt="kirby" id="mon_id" />
<script type="text/javascript">
  function mafonction(e){
    if (!e) var e = window.event;
    if (e.button==2){
       //code pour le clic droit
       alert('clic droit');
    }
}
 
document.getElementById('mon_id').onmousedown=mafonction;
 
</script>

Bon dev,

ERE

[bourinator]

Merci à tous, j'ai corrigé l'appel de ma fonction en ajoutant event en argument, et ca marche tout de suite mieux. Il ne me reste plus qu'à gérer pour IE.
Sinon, quand je fais mon clic droit, le menu contextuel apparait, je vais chercher comment le neutraliser.
En tout cas, encore merci !

[emmanuel.remy]

Sinon, quand je fais mon clic droit, le menu contextuel apparait, je vais chercher comment le neutraliser.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
element.oncontextmenu = function() {
       return false;
    }

ERE