2010-12-14 95 views
1

Bon, alors je le code suivant qui fonctionne très bien dans tous les navigateurs sauf IE ..IE8 briser le vol stationnaire des options de la boîte de sélection

$('input[title!=], select[title!=]').mouseenter(function(){ 
    if ($(this).data('focused')!='y') { 
     $(this).data('t', this.title).data('focused', 'y'); 
     this.title = ''; 
     var pos = $(this).position(); 
     $('body').append('<div id="toolTip" class="round-5 shadow-heavy"><img class="arrow" src="/images/bg/toolTip.png" alt="" />'+($(this).data('t'))+'</div>'); 
     $('#toolTip').css('top',(pos.top+($(this).height()/2)-($('#toolTip').innerHeight()/2))+'px').css('left',(pos.left+($(this).innerWidth())+20)+'px'); 
    } 
}).mouseleave(function(){ 
    if ($(this).data('focused')!='n') { 
     $(this).data('focused', 'n'); 
     this.title = $(this).data('t'); 
     $('#toolTip').remove(); 
    } 
}).focus(function(){if($(this).data('focused')!='y'){$(this).trigger('mouseenter');}}).blur(function(){if($(this).data('focused')!='n'){$(this).trigger('mouseleave');}}); 

Maintenant, dans IE si vous ouvrez la boîte de sélection et déplacez votre souris sur l'une des options, la boîte se ferme. Ce qui en est la cause, c'est que l'IE ne compte pas la liste déroulante des options dans le cadre de l'élément select, donc il déclenche l'événement mouseleave.

Est-ce que quelqu'un connaît un correctif autour de cela?

Répondre

2

IE en particulier une très mise en œuvre bizarre de <select>, depuis IE6 (peut-être plus tôt), il a été tiré de WinForms ... qui est aussi la raison pour laquelle il se trouve au-dessus de tout sauf un dans les anciennes versions.

Malheureusement, les événements sur ou impliquant <option> éléments ne sont pas fiables au mieux (comme vous le voyez) ... et ne peuvent pas faire confiance à IE. Vous pouvez désactiver le comportement dans IE, mais c'est à peu près le seul "correctif" qui existe.

L'alternative tout-est est de remplacer le <select> complètement, il ya quelques plugins jQuery là-bas qui font cela, check out this question for options around that.