arreter la propagation d'evenement
bonjour, voici le code :
index.html
Code:
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:
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 !
