arreter la propagation d'evenement

**guy777** · 27/06/2008, 13h33

bonjour, voici le code :

index.html

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
<html>
    <head>
        <title>mon titre</title>        
        <script src='moveable.js'></script>
    </head>
    <body>
        <div style='height:200px; width:300px; background-color: blue;' id='myDiv'>
            <form>
                1 <input type='text' /><br/>
                2 <input type='text' /><br/>
                3 <input type='text' /><br/>
                <input type='submit' />
            </form>
        </div>
        <script>moveable(document.getElementById('myDiv'));</script>
    </body>
</html>

moveable.js

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
var GT_DRAG = false;
var GT_objInDrag = null;
 
function moveable(obj) {
    obj.style.position = 'absolute';
    obj.addEventListener('mousedown', GT_begin_drag, false);
    obj.addEventListener('mouseup', GT_end_drag, false);
}
 
function GT_begin_drag(e) {
    if(!GT_DRAG) {    
        e.stopPropagation();
        e.preventDefault();
        GT_DRAG = true;
        GT_objInDrag = e.target;
        GT_objInDrag.style.backgroundColor = 'red';
        document.addEventListener('mousemove', GT_lets_drag, false);
    }
}
 
function GT_lets_drag(e) {
    if(GT_DRAG) {
        GT_objInDrag.style.left = e.clientX-5;
        GT_objInDrag.style.top = e.clientY-5;
    }
}
 
function GT_end_drag() {
    if(GT_DRAG) {
        GT_DRAG = false;
        GT_objInDrag.style.backgroundColor = 'blue';
        GT_objInDrag = null;
    }
}

Mon probleme est au niveau de la propagation des evenements, lorsque l'on fait un cliquer-glisser sur la div, on doit pouvoir la déplacer. Cela marche nickel, sauf que lorsque l'on fait un click sur un des éléments à l'intérieur de cette div, on voit que le code de GT_begin_drag est exécuté. J'ai mis un stopPropagation mais celui-ci n'a aucun effet !!!

au secours !

**SpaceFrog** · 27/06/2008, 13h43

stoppropagation c'est pour Gecko ...

pour du crossbrowser ici par exemple sur des balises li :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function stopLis(){
var AllLis=document.getElementsByTagName('li');
alert(AllLis.length)
for(j=0;AllLis[j];j++){
      AllLis[j].onclick=function(evt){
			  		evt=(evt)?evt:window.event;
			  		if (evt.stopPropagation) {evt.stopPropagation();}
					else{evt.cancelBubble = true;}
					}
		}
}

**guy777** · 27/06/2008, 13h45

Ah oui j'ai oublié de préciser que mon prog ne fonctionne QUE sur FIREFOX. Je ne veux pas d'IE7 !!!

**SpaceFrog** · 27/06/2008, 13h48

peu importe tu peux adapter ce code ... ou au pire ne pas le modifier ... qui peut le plus peut le moins

**guy777** · 27/06/2008, 14h14

Ben honnêtement cela ne marche pas non plus. C'est un programme qui doit normalement être destiné à plusieurs div dans une même page. Je pense qu'il ne doit pas être situé au bon endroit ...

Je continue à chercher, si quelqu'un a une solution ...

**SpaceFrog** · 27/06/2008, 14h15

ben replace li par div ... et lance la fonction dans le onload de la page ???

**guy777** · 27/06/2008, 14h48

Toujours pas, j'exécute la fonction après l'avoir adaptée mais la propag se fait toujours ! comprends pô, je pense que c'est lié à l'endroit où on le met ...

EDIT: Après quelques essais, je pense qu'il y a un sens à respecter. Lorsque je met le stopPropagation sur mes INPUT, cela fonctionne. Le problème est qu'il va falloir mettre un stopPropagation sur tous les "enfants" de ma div ! Y'a-t-il un moyen d'éviter cela ?

**SpaceFrog** · 27/06/2008, 14h52

dasn le onlaod de la page !!

tu la mets dans une fonction danc le head de ta page et tu ma lances dans le onload

**guy777** · 27/06/2008, 14h55

C'est ce que j'ai fait, je met la fonction dans le HEAD, puis je l'appelle par un onLoad ! Voir le EDIT dans mon message précédent...

**SpaceFrog** · 27/06/2008, 14h57

montre ton code ?

**guy777** · 27/06/2008, 15h12

Trop tard je l'ai modifié !!!

J'ai fait une fonction récursive qui ajoute un stopPropagation sur tous éléments enfants d'une DIV ! C'est carrément pô propre mais ça marche !

**SpaceFrog** · 27/06/2008, 15h14

heu ben c'est exacteent ce qu'est supposé faire le code donné sur la collection des getElementsByTagName('div')

**guy777** · 27/06/2008, 15h16

Pas vraiment, si je remplace LI par DIV, il se contente juste de mettre stopPropagation sur la DIV mais pas sur les éléments enfants... De plus dans ma DIV, je peux avoir plusieurs sortes d'élements (texte, liste, image, etc.)

**SpaceFrog** · 27/06/2008, 15h18

ha ben si tu ne donnes pas tous les détails ...

**guy777** · 27/06/2008, 15h29

Je pense comme je l'ai dit que stopPropagation n'agit que dans le sens de la remontée des évènements (bubbling) et pas dans la phase de capture...

EDIT : j'ai taggé comme résolu alors que ça ne l'est pas, mais en l'absence de précisions d'autres utilisateurs et comme j'ai trouvé une solution "bricolée" ...

arreter la propagation d'evenement

JavaScript

Discussions similaires

Partager

Partager