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

[Torx26]

@willpower
Cela ne change rien (le clique droit "capture" tous les events), cependant que le double clique soit bloqué par le clique simple je peux le comprendre en revanche que le clique simple gauche bloque le clique droit me parait moins logique.

@SpaceFrog
merci j'utiliserai cette méthode en dernier recours, car je préférais me passer de Bibliothèque externe au langage

[Willpower]

@willpower
Cela ne change rien (le clique droit "capture" tous les events), cependant que le double clique soit bloqué par le clique simple je peux le comprendre en revanche que le clique simple gauche bloque le clique droit me parait moins logique

Je ne vois nul part dans ton code que tu spécifie le clique SIMPLE GAUCHE ?

onmousedown = CLIQUE (bouton enfoncé pour être plus précis, n'importe lequel de bouton)
ondblclick = DOUBLE CLIQUE (j'avoue ne pas savoir avec quels boutons il interagit)
oncontextmenu = OUVERTURE DU MENU CONTEXTUEL (déclenché par un clique droit sur la majorité des config.)

[Torx26]

Bonjour,

Oui c'est de ma faute, trop absorber par mon problème, je l'ai mal décri.

J'ai besoin de faire du drag&drop qui n'est certes pas un simple clic gauche mais un onmouse suivi d'un onmouseup. Cependant comme un clic est un enchainement de onmouse-onmouseup j'ai pris ce raccourcis.

D'un double clique gauche, je fais apparaitre les objets sur lequels l'utilisateur peut faire du drag&drop.

Enfin d'un simple clic droit je permets l'édition en faisant apparaitre un fenêtre pour éditer les objets

voila, si quelqu'un sait comment si prendre de maniere assez direct (ie sans timer, ou ajout de lib).

Par avance merci

[SpaceFrog]

Y'a longtemps que je ne prends plus la tête avec le drag & drop, c'est tellement bien géré avec JQuery, des fois une lib externe peut être salvatrice ...