11496 sujets

JavaScript, DOM et API Web HTML5

RemoveEventlistener ne marche pas avec l'object event !

Bonjour,

Je rencontre une réel difficulté dans mon code : le code est un système de Drag&Drop très basique que j'ai codé en 10 minutes chrono parfaitement, enfin c'est ce que je pensais jusqu'à que je rencontre des problème pour stopper l'effet de déplacement de mon élément Smiley lol

Voici le code tout y est expliqué :

[code

<body>
<!-- petite div qui prend l'apparence d'une boule grace au border-radius 50px -->
<div id="boule" onmousedown="deplacement();" onmouseup="stop();" style="position:absolute; left:0px; cursor:pointer; height:100px;width:100px ;border-radius: 50px ; background-color:red"></div>

<!-- notre petit script très simple mais fonctionnel en DOM-2 -->
<script>

function deplacement()
{
// chaque fois que l'on déplace la souris dans l'ensemble du body on exécute une fonction
document.body.addEventListener ('mousemove', function coordonnees(event){
//récupération de l'évènement event associé à l'évènement mousemove / récupération des coordonnées de la souris
var x = event.clientX ;
var y = event.clientY ;
//on donne les coordonnées de la souris à la boule qui est en position:absolute en enlevant 50 pour centrer le curser de la souris puisqu'il s'agit d'une div
document.getElementById('boule').style.left= x - 50 + 'px' ;
document.getElementById('boule').style.top= y - 50 + 'px' ;}

, false ) ;
}

//Lorsque l'on fait mouseup on appel cette fonction chargé de supprimer l'évènement associé à la fonction coordonnees
function stop()
{
document.body.removeEventListener ('mousemove', coordonnees() , false ) ;
}
</script>
</body>

[/code]

Résultat des courses : Uncaught ReferenceError: coordonnees is not defined dans fonction stop..

J'ai penser qu'il fallait déplacer la fonction coordonnées en dehors de l'évènement pour être lisible de cette manière : 



<body>
	<!-- petite div qui prend l'apparence d'une boule grace au border-radius 50px -->
	<div id="boule" onmousedown="deplacement();" onmouseup="stop();" style="position:absolute; left:0px; cursor:pointer; height:100px;width:100px ;border-radius: 50px ; background-color:red"></div>
	
	<!-- notre petit script très simple mais fonctionnel en DOM-2 -->
	<script>
	
	function coordonnees () 
	{
		//récupération de l'évènement event associé à l'évènement mousemove / récupération des coordonnées de la souris
		var x = event.clientX ;
		var y = event.clientY ;
		//on donne les coordonnées de la souris à la boule qui est en position:absolute en enlevant 50 pour centrer le curser de la souris puisqu'il s'agit d'une div
		document.getElementById('boule').style.left= x - 50 + 'px' ;
		document.getElementById('boule').style.top= y - 50 + 'px' ;
	} 
	
	function deplacement()
	{
		// chaque fois que l'on déplace la souris dans l'ensemble du body on exécute une fonction
		document.body.addEventListener ('mousemove', coordonnees(event), false ) ; 
	}
	
	//Lorsque l'on fait mouseup on appel cette fonction chargé de supprimer l'évènement associé à la fonction coordonnees
	function stop()
	{
		document.body.removeEventListener ('mousemove', coordonnees() , false ) ; 
	}
	</script>
</body>


Mais la le problème est que l'évènement mousemove ne fonctionne plus dutout.. Smiley bawling

Merci pour les futures réponses, le code est entièrement executable dans un html directement à vos test Smiley biggrin

Cordialement,
Lourenco kevin
salut,
l'objet Event doit être récupérer dans la plupart des navigateurs. Tu dois donc le recevoir en paramètre de ta fonction "coordonnees()".
Par ailleurs, ça ne sert à rien de le passer en paramètre quand tu associes une fonction à un évènement JS :

document.body.addEventListener ('mousemove', coordonnees(event), false ) ;

D'autant que lorsque tu écris ...coordonnees()... , la fonction s’exécute tout de suite. Donc le même code mais qui marche Smiley langue 

	<!-- petite div qui prend l'apparence d'une boule grace au border-radius 50px -->
	<div id="boule" onmousedown="deplacement();" onmouseup="stop();" style="position:absolute; left:0px; cursor:pointer; height:100px;width:100px ;border-radius: 50px ; background-color:red"></div>
	
	<!-- notre petit script très simple mais fonctionnel en DOM-2 -->
	<script>
	
	function coordonnees (event) 
	{
		//récupération de l'évènement event associé à l'évènement mousemove / récupération des coordonnées de la souris
		var x = event.clientX ;
		var y = event.clientY ;
		//on donne les coordonnées de la souris à la boule qui est en position:absolute en enlevant 50 pour centrer le curser de la souris puisqu'il s'agit d'une div
		document.getElementById('boule').style.left= x - 50 + 'px' ;
		document.getElementById('boule').style.top= y - 50 + 'px' ;
	} 
	
	function deplacement()
	{
		// chaque fois que l'on déplace la souris dans l'ensemble du body on exécute une fonction
		document.body.addEventListener ('mousemove', coordonnees, false ) ; 
	}
	
	//Lorsque l'on fait mouseup on appel cette fonction chargé de supprimer l'évènement associé à la fonction coordonnees
	function stop()
	{
		document.body.removeEventListener ('mousemove', coordonnees , false ) ; 
	}
OO super !! Smiley biggrin

Je n'aurais jamais pensé que ca aurait fonctionné de cette manière, j'ai encore 2 3 choses a revoir Smiley lol

En tout cas merci a toi, sujet résolu ! Smiley smile
Sujet clos
Aller à