11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,
je rencontre un bogue assez étrange que je ne m'explique pas, d'autrant que ce bogue n'apparait que sous Firefox (3.0.14) sous Windows XP; sous IE6&7, Opera et Safari sous Windows XP, tout est ok.

=> La situation?

Et bien l'objectif est d'afficher une popin "Envoi à un ami" au roll d'un bouton.
Pour cela, je place dans une même <div> "bloc_partage_ami", la popin <div> "popin_envoi_ami" et le lien <a> "bt_envoi_ami"

<div class="bloc_partage_ami" id="bloc_partage_ami">
	<a class="bt_envoi_ami" href="#" >J'envoie à un ami</a>
	<div id="popin_envoi_ami" class="invisible">
		<form name="form_actu_friend" action="#" method="post" onsubmit="return ;">
			<label for="">Nom</label>
			<input type="text" class="input_text" name="" id="" />
			<br />
			<label for="">Prénom</label>
			<input type="text" class="input_text" name="" id="" />
			<br />
			<label for="">Email</label>
			<input type="text" class="input_text" name="" id="" />
			<br />
			<label for="">Email ami</label>
			<input type="text" class="input_text" name="" id="" />
			<br /><br />
			<input type="submit" name="valider_ami" id="valider_ami" value="Envoyer" />
		</form>
	</div>
</div>

A noter que la class "invisible" n'est qu'un simple {display:none}

Pour afficher la popin, un evenement "onmouseover" et un evenement "onmouseout" sont attachés au div "bloc_partage_ami".

//Popin "Envoi à un ami"
var showPopinActuAmi = function(){
	var el = document.getElementById('popin_envoi_ami');
	if(el){
		el.className="popin_envoi_ami";
	}
}

var hidePopinActuAmi = function(){
	var el = document.getElementById('popin_envoi_ami');
	if(el){
		el.className="invisible";
	}
}

function initPopinActuAmi(){
	var bloc_partage_ami = document.getElementById('bloc_partage_ami');
	if(bloc_partage_ami){
		bloc_partage_ami.onmouseover=showPopinActuAmi;
		bloc_partage_ami.onmouseout=hidePopinActuAmi;
	}
}

la fonction initPopinActuAmi() est appelée au chargement de la page;

=> Le bogue ?
Et bien sous Firefox 3.0.14 sous Windows XP, lorsqu'on passe, un peu vite, la souris sur les input text, la popin disparait : l'evenement onmouseout semble être exécuté !?!
Je ne comprends pas le pourquoi du comment...

A noter que j'ai trouvé une solution en plaçant un autre div plus grand (width et height) que "bloc_partage_ami" sous ce même div "bloc_partage_ami" et en attachant l'veenement onmouseout dessus plutôt qu'à "bloc_partage_ami" .
Mais bon, vous l'aurez deviné, cette solution ne me satisfait pas même si elle règle mon problème.
Donc si quelqu'un a une idée, je suis preneur.

Merci d'avance.
Modifié par zemp (16 Oct 2009 - 16:21)