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 ???

arreter la propagation d'evenement

JavaScript

Vue hybride

Discussions similaires

Partager

Partager