jquery: balises imbriquées et vol stationnaire() ne fonctionne pas dans IE

Question

i ont une construction comme celui-ci:

<div id="container"> 

<span> 
    <span></span> 
</span> 

<span> 
    <span></span> 
</span> 

</div> 

je dois attraper l'événement mouseout du récipient, donc je fait jquery faire ceci:

Dans Firefox/Opera, il ne déclenche la fonction mouseout qu'en quittant le div (comme je le veux).

Dans IE, il déclenche la fonction mouseout à chaque * -Tag à l'intérieur du div les frappes de la souris. (* peut-être important est que les balises span ont aussi des événements mouseover et out)

Quelqu'un a une idée pour résoudre ce problème? (La structure imbriquée ne peut pas être modifiée car une disposition complexe)

thx4 des idées!

Answer 1

Mhhh Je n'ai pas IE près mais vous pouvez essayer le jQuery mouseout demos (et démos vol stationnaire) si elle fonctionne bien semble être un problème avec votre code dans une autre ligne ... enfin, vous pouvez workaroud avec:

$("#container").hover('',function() 
{ 
    //Are you sure? 
    if($(this).attr('id') == 'container') 
    { 
     alert('yup this is container'); 
    } 
}); 

Answer 2

@evelio: il ne fonctionnait pas, l'identifiant était toujours "conteneur"

comment je l'ai résolu (jusqu'à présent ...):

croient ou non, l'attribut background-color du conteneur-div devait être mis en couleur. Im encore assez choqué de ce fait, mais je l'ai essayé plusieurs fois et c'est seulement l'attribut background-color dans le CSS qui le fait fonctionner ou non.

et: la couleur # 000000 ne fonctionne pas, toute autre couleur ne, y compris "blanc"

Answer 3

Avez-vous essayé:

$("#container").hover('',function(){ 
    alert("Out"); 
    return false; 
}); 

ou:

$("#container").hover('',function(e){ 
    if($(e.target).is("#container")){ 
     alert("Out"); 
     return false; 
    } 
}); 

ou mieux encore :

$("#container").mouseout(function(e){ 
    if($(e.target).is("#container")){ 
     alert("Out"); 
     return false; 
    } 
}); 

Si vous avez seulement besoin de la souris, il n'y a aucune raison d'utiliser la fonction hover.

Answer 4

$("#container").hover('',function(ev){ 

     alert("Out"); 
     if(ev.stopPropagation) { ev.stopPropagation(); } //For 'Good' browsers 
     else { ev.cancelBubble = true; } //For IE 

}); 

également lire: Event bubbling and capturing

Answer 5

J'ai eu un problème similaire dans IE 6, 7 et 8. Mafka est juste, la couleur de fond doit être réglé pour le faire fonctionner. S'il n'est pas possible de définir une couleur d'arrière-plan sur votre "conteneur", vous pouvez toujours définir la couleur d'arrière-plan sur blanc et définir l'opacité sur 0.

Je l'ai fait avec le code JavaScript suivant avant lier l'événement mouseover dans jQuery:

if ($.browser.msie) { 
    $("#container").css({ 
     background: '#fff', 
     opacity: 0 
    }); 
} 

Answer 6

essayer cette

$("#container").mouseleave(function(){ 
alert("Out"); 
}); 

Comme pour IE, boycotter le navigateur merdique et faire blogs sur son désespoir pur jusqu'à ce que vos doigts s'engourdissent. Ce navigateur est responsable du fait que le temps des concepteurs de Web vaut environ 33% de moins que ce qu'il devrait être. Tuez-le comme bon vous semble.

Answer 7

La façon dont vous pouvez le résoudre est d'ajouter un png transparant 1px comme arrière-plan.

Voir: IE8: Div hover only works when background color is set, very strange, why?