Discussion :

[Torx26]

Bonjour,

j'essaie lors d'un clic du bouton droit de la souris dans un canvas, d’exécuter une fonction (javascript) avec comme paramètre les coordonnées de l’événement.

Pour ce faire, j'ai essayé le code suivant:

Code :

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

1
2
 
oncontextmenu = ma_fonction(window.event.clientX, window.event.clientY);

sachant que j'ai besoin d'une action variant selon l’élément où a eu lieu le clic.

Je m'explique. Si le clic a eu lieu "sur" un élément de type A appeler la fonction Af, si c'est un élément de type B appeler la fonction Bf.

Sachant qu'il n'y a qu'une fonction a appelé par type et pas plus il ne m'est pas nécessaire de passer par un menu.

D'avance merci

[Torx26]

debut de reponse:

dans le .htm

Code :

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

1
2
 
<canvas id = "id_canvas" oncontextmenu = ma_fonction(event)> </canvas>

dans le .js

Code :

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

1
2
3
4
 
function ma_fonction(event) { 
	// mon traitement
}

reste la fonction (mais c'est hors propos ici) et à desactiver "l'application" du veritable clic droit ie le menu contextuel (enregistrer image, ...) qui apparait apres.

[Torx26]

autre solution:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
init() {
	canvas.ondblclick = function(canvas) {
		myDblClick(canvas); 
	}
	canvas.oncontextmenu = function(canvas) {
		myContextmenu(canvas);   
	   return false;
	}
}
 
function myContextmenu(canvas) {
	alert("clic droit");
}
 
function myDblClick(canvas) {
	alert('double clic');  
}

plus besoin de

Code :

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

oncontextmenu = ma_fonction(event)

dans la balise canvas et tout fonctionne bien.

Sauf si on rajoute un écouteur sur un simple clic gauche ou une pression de bouton ainsi le code suivant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
init() {
	canvas.onmousedown = function(canvas) {
		myClick(canvas);  
	   return false;
	}
	canvas.ondblclick = function(canvas) {
		myDblClick(canvas); 
	}
	canvas.oncontextmenu = function(canvas) {
		myContextmenu(canvas);   
	   return false;
	}
}
function myContextmenu(canvas) {
	alert("clic droit");
}
function myDblClick(canvas) {
	alert('double clic');  
}
function myClick(canvas) {
	alert("simple clic");
}

donne toujours le même message quelque soit le bouton ou le nombre de clics : "simple clic"

Si quelqu'un peut m'expliquer ce qui ce passe ou comment avoir les 3 événements distincts

[Willpower]

Oula, tu réponds bien à tes propres questions ^^

Pour répondre à la dernière, tu bloques le cliques, hors un clique droit ou un double clique comment par un "clique" donc ils ne peuvent jamais se déclencher.

essaye sans bloquer le simple clique, tu arriveras peut-être à ce que tu désires :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
init() {
	canvas.onmousedown = function(canvas) {
		myClick(canvas);  
	   return true;
	}
	canvas.ondblclick = function(canvas) {
		myDblClick(canvas); 
	}
	canvas.oncontextmenu = function(canvas) {
		myContextmenu(canvas);   
	   return false;
	}
}

[SpaceFrog]

Avec Jquery par exemple

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('#element').mousedown(function(event) {
    switch (event.which) {
        case 1:
            alert('bouton gauche');
            break;
        case 2:
            alert('Molette');
            break;
        case 3:
            alert('bouton droit');
            break;
        default:
            alert('tu es sur que c\'est une souris ?');
    }
});

[Torx26]

merci je vais tester