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 :-)