Discussion :

[xephres]

Bonjour � tous,

Je d�marre en Javascript et comme j'ai lu et relu qu'il faut s�parer les diff�rents langages, je me suis mis en t�te de cr�er un d�tecteur d'�v�nement (pour �viter les onclick="javascript:maFonction(...) et consorts".

Oui, il existe des biblioth�ques mais avant d'en utiliser une, quelle qu'elle soit, j'aime savoir ce qu'elle fait, m�me basiquement. Et donc je viens solliciter votre aide (conseils, corrections, explications... critiques -constructives ;-) -)...

Mon probl�me est le suivant, je souhaite g�rer en simultan� deux �v�nements "mousedown" et "mousemove". Seulement, une fois que j'ai cr�� le "listener" pour le "mousemove", il reste actif et je n'arrive pas � la d�sactiver.

Et la question qui me taraude, � force d'essais infructueux, est de savoir si je ne fais pas une confusion entre le bouillonnement et ses cons�quences et la suppression de "listener". Le code suit:

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
	function main() {
		var addEvent = listener;
		addEvent(document, 'mousedown', actif);
	}
 
	function listener(obj,evType,fn)
	{
		if(obj.addEventListener)
		{
			obj.addEventListener(evType,fn,false);
		} 
		else if(obj.attachEvent)
		{
			obj.attachEvent("on"+evType,fn) ;
		}
	} 
 
	function actif(e){
		var el= e.target||event.srcElement;
		if(!el.tagName)el=el.parentNode;
		alert('vous avez cliqué sur un élément "'+el.tagName+'" dont l\'id est "'+el.id+'"')
 
		var addEvent2 = listener;
		addEvent2(el, 'mousemove', mover);
                reset();
	}
 
	function mover(e){
		alert('move');
	}
 
	function reset()
	{	
		document.detachEvent('mousemove', mover);
		document.removeEventListener('mousemove', mover, false);
	}
 
	main();

La syntaxe a des d�fauts et la fonction "reset()" est affreuse mais elle exprimer mon intention. Si quelqu'un a une solution avec l'explication qui va bien

Merci par avance.

[kernelfailure]

D�j�, c'est clair que tu vas avoir de bonnes su�s � cliquer comme un forcen� sur tes alertes (remplace mousemove par mouseup)

Est-ce que tu es sur d'attacher ton 'mousemove' sur document ?
Car c'est sur document que tu fais le d�tachement.

Tu as pris soin de v�rifier la pr�sence des attachEvent, fais de m�me avec les detachEvent.

Petite remarque. Tu n'es pas oblig� de faire �a :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
var addEvent = listener;
addEvent(document, 'mousedown', actif);

Ceci suffit :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

listener(document, 'mousedown', actif);

Ici, je suis surpris du m�lange (e ou event ?) :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
var el= e.target||event.srcElement;
if(!el.tagName)el=el.parentNode;

Je ne proc�de pas comme �a, je fais plut�t :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

if (!e) e=window.event;

Puis je travailles avec e.
Mais bon, c'est peut-�tre une mani�re d'optimiser la chose. C'est qu'en fait, aussi, je ne sais pas quel nav met ou pas event

[xephres]

Merci pour les infos, mais... �a ne fonctionne pas... Je suppose que je n'ai pas compris les modifs � faire... J'ai l'impression d'�tre en train de m'emm�ler les pinceaux...

Est-ce que je place mal les fonctions ou est-ce qu'il me manque des �l�ments? Il me semblait, d'apr�s les explications trouv�es �a et l�, que pour supprimer l'�v�nement sur le "mousemove" il est n�cessaire de d�tacher l'�couteur qui lui est li�, autrement dit, si j'ai un addEventlistener sur un mousemove, je dois faire un removeEventListener sur ce m�me mousemove (ou plus exactement sur le noeud/�l�ment auquel est li� l'action mousemove)

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
	function main() {
		var addEvent = listener;
		addEvent(document, 'mousedown', actif);
	}
 
	function listener(obj,evType,fn)
	{
		if(obj.addEventListener)
		{
			obj.addEventListener(evType,fn,false);
		} 
		else if(obj.attachEvent)
		{
			obj.attachEvent("on"+evType,fn) ;
		}
	} 
 
	function actif(e){
		var el= e.target||event.srcElement;
		if(!el.tagName)
		{
			el=el.parentNode;
		}
		alert('vous avez cliqué sur un élément "'+el.tagName+'" dont l\'id est "'+el.id+'"')
 
		var addEvent2 = listener;
		addEvent2(document, 'mousemove', mover);
		var removeEvent = remover;
		removeEvent(document, 'mousemove', reset);
	}
 
	function mover(e){
		alert('move');
	}
 
	function remover(obj,evType,fn)
	{
		if(obj.detachEvent)
		{
			obj.detachEvent("on"+evType,fn);
		} 
		else if(obj.removeEventListener)
		{
			obj.removeEventListener(evType,fn,false);
		}
	}
 
	function reset()
	{	
		alert('suppression');
	}
 
	main();

La question qui me vient, mais le test tent� ne fonctionnait pas (avant m�me de poster un message hier, j'avais tent� cette approche): faut-il cr�er un addEvent li� au mouseup (qui va appeler une fonction de suppression de l'�couteur li� au mousemouve)?
Seulement... �a me semble capilotract� de cr�er un �v�nement pour supprimer un �v�nement...� moins qu'il ne s'agisse alors de supprimer, � la fois l'�couteur pour le mouseup et le mousemove? Mais o� les placer? Que ce soit dans action ou dans main, �a ne fonctionne jamais: soit plus rien ne fonctionne, soit le mousemove reste actif...

�a va me rendre ch�vre... Help!...

[kernelfailure]

D�j�, le principal probl�me, c'est que le remove doit �tre fait avec la m�me fonction que le add.

Forc�ment, ton 'reset' n'a pas de pendant, puisque c'est 'mover' que tu vise
Aussi, tu lui coupe la chique un peu t�t.

Jette un oeil l�-dessus :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
<head></head>
<script>
	function addEvent(obj,evType,fn) {
		if (obj.addEventListener) {
		 	obj.addEventListener(evType,fn,false);
		} else if (obj.attachEvent) {
			obj.attachEvent("on"+evType,fn) ;
		} else {
			obj["on"+evType] = fn;
		}
	}
 
	function subEvent(obj,evType,fn) {
		if (obj.detachEvent) {
			obj.detachEvent("on"+evType,fn);
		} else if (obj.removeEventListener) {
			obj.removeEventListener(evType,fn,false);
		} else {
			obj["on"+evType] = null;
		}
	}
 
 
	function actif(e) {
		if(!e) e=window.event
		var el = e.target || e.srcElement;
		if(!el.tagName) el=el.parentNode;
		alert('vous avez cliqué sur un élément "'+el.tagName+'" dont l\'id est "'+el.id+'"')
 
		addEvent(el, 'mouseup', mover);
	}
 
	function mover(e) {
		if(!e) e=window.event
		var el = e.target || e.srcElement;
		alert('move');
		subEvent(el, 'mouseup', mover);
	}
 
	/** **/
	function main(elm) {
		addEvent(elm, 'mousedown', actif);
	}
 
</script>
<body onload="main(document.getElementById('cazamouse'));">
<div id="cazamouse" style="position:absolute;top:100;left:100;width:100px;height:100px;border:1px solid black;background-color:blue">
</div>
</body>
</html>

J'ai pr�f�r� ne pas employer 'document' pour que tu puisses mieux appr�cier le 'mouseup' qui n'est intercepter que dans le carr�.

[le_chomeur]

Question : comment supprimer une fonction anonyme ????

[kernelfailure]

Question : comment supprimer une fonction anonyme ????

Dans la fonction, avec arguments.callee

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
		addEvent(el, 'mouseup', function (e) {
						if(!e) e=window.event
						var el = e.target || e.srcElement;
						alert('move');
						subEvent(el, 'mouseup', arguments.callee);
						});

Ou ceci :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
		addEvent(el, 'mouseup', function mover (e) {
						if(!e) e=window.event
						var el = e.target || e.srcElement;
						alert('move');
						subEvent(el, 'mouseup', mover);
						});

[xephres]

Merci ^ ^

Je crois commencer � comprendre, pour la suite, comme on dit, c'est en forgeant que l'on devient forgeron :-) Donc � moi d'�uvrer pour donner forme � mon id�e :-)