l'indicible - Création graphique & Développement - Paris - Blog

Javascript est un langage très utile pour beaucoup de choses de nos jours.
Malheureusement, chaque navigateur l’implémente à sa façon, et évidemment ils ne proposent pas la même gestion des évènements !

Prenons un exemple : vous venez de faire un div que l’on peut déplacer à volonté avec la souris. On clique, le déplacement commence… on relâche, le déplacement s’arrête. Mais voila, si on relâche en dehors de la fenêtre du navigateur, aucun événement n’est déclenché, et on continue à déplacer notre div indéfiniment !

Le meilleur moyen d’éviter ça est de stopper le déplacement dès l’instant où l’on quitte la fenêtre du navigateur. Seulement voila : javascript ne déclenche aucun événement lorsque c’est le cas. Il faut tricher…

On commence par se dire que si l’on cesse de survoler l’objet que l’on déplace, on arrête le déplacement… Et l’on se rend vite compte que ce n’est pas pratique du tout ! En effet, la souris va presque toujours bouger plus vite que la div et le déplacement cessera instantanément, sauf si l’on bouge au ralenti.

Pour éviter ça, on peut chercher à déterminer vers quel élément la souris à quitté la div, et n’arrêter le déplacement que si ce n’est pas un élément inclus dans la balise html.
Facile… en théorie. Mais tous les navigateurs n’utilisent pas les mêmes attributs de l’événement, et évidemment IE va encore nous poser problème !

Sans plus d’introduction, voici un morceau de code jQuery (« code less do more ») qui vous aidera grandement à résoudre ce problème :

$('div#dragged').bind('mouseleave.dragged',function(e) {
	var ev = e || window.event;
	if(ev.relatedTarget){
		if(ev.relatedTarget == $('html').get(0)){
			stopDrag();
		}
	} else {
	// IE
		if(!ev.toElement){
			stopDrag();
		} else if(ev.toElement.tagName == "HTML"){
			stopDrag();
		}
	}
})

Maintenant, les explications :

$('div#dragged').bind('mouseleave.dragged',function(e) {

On associe une fonction à l’événement ‘mouseleave’ sur la div déplaçable.
Notez au passage que jQuery nous permet d’associer un nom à cette fonction (ici : ‘.dragged’), ce qui est très pratique pour gérer ensuite les événement nominativement, surtout dans le cas ou plusieurs événement du même type sont associés à cet objet.

	var ev = e || window.event;

On récupère ensuite l’événement déclenché. Firefox et les browsers respectueux des standards le trouveront en paramètre de la fonction (ici : ‘e’), pour Internet Explorer il faudra aller le chercher dans window.event.
Le double pipe (‘||’) permet d’attribuer à la variable ‘ev’ la valeur de ‘e’ si elle existe, et la valeur de ‘window.event’ si ce n’est pas le cas.

	if(ev.relatedTarget){
		if(ev.relatedTarget == $('html').get(0)){
			stopDrag();
		}

Pour les navigateurs standards, l’événement contient une propriété ‘relatedTarget’.
Si elle existe, on est dans le cas d’un navigateur standard, sinon on est probablement sous IE.

Cette propriété retourne l’élément ‘html’ quand on quitte la div en sortant du navigateur.
On utilise ici une syntaxe jQuery pour comparer le contenu de cette propriété avec le contenu html (‘get(0)’ sur l’objet jQuery) de la balise ‘html’. S’ils sont identiques, on peut arrêter le déplacement.

	} else {
	// IE

Si la propriété ‘relatedTarget’ n’existe pas, on est alors dans le cas d’IE. Deux cas se présentent alors :

		if(!ev.toElement){
			stopDrag();

Pour certaines versions d’IE, la propriété ‘toElement’ de l’événement est indéfinie. C’est un critère suffisant pour arrêter le déplacement.

		} else if(ev.toElement.tagName == "HTML"){
			stopDrag();
		}
	}
})

Pour d’autres versions d’IE, la propriété ‘toElement’ existe. On devra dans ce cas vérifier que la propriété ‘tagName’ de ‘toElement’ est bien ‘HTML’. Si c’est le cas, on arrête le déplacement.

Voila, j’espère que ces quelques explications pourront vous aider, il n’est pas toujours évident de trouver sur internet les ressources nécessaires pour arriver à faire cette chose pourtant si basique !

Cette entrée à été postée le à 16:57 et est enregistrée dans Développement, Javascript, Tutoriaux.
Vous pouvez suivre les réponses à cette entrée à travers le flux RSS 2.0.
Vous pouvez laisser une réponse, ou promouvoir depuis votre propre site.