pourquoi mon code jquery est ok dans firefox, mais pas ok en chrome et ie8?

Question

function tip(evt,s){ 
     $('p#vtip').show(); 

     xOffset = -10; // x distance from mouse 
     yOffset = 10; // y distance from mouse 
     top = (evt.pageY + yOffset); 
     left = (evt.pageX + xOffset); 

     var str = $(s, "> #content").html(); 
     $('p#vtip #content').html(str); 
     $('p#vtip').css("top", top+"px").css("left", left+"px").fadeIn("slow"); 
} 

dans Firefox:

alt text http://omploader.org/vM2hycg

et en chrome et IE8 est toujours dans le fond:

alt text http://omploader.org/vM2hycw

qui peut changer ce code pour le chrome et IE8 ??

et c'est html:

<div> 
    <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br> 
    </div> 

<p id="vtip" style="position:absolute"><img id="vtipArrow" src="vtip_arrow.png" />testtest<span class="content"></span></p> 

Answer 1

Si vous utilisez jQuery, vous pouvez adopter une approche différente pour la gestion de vos événements.

Tout d'abord, remplacez id="content" par class="content". Les ID doivent être uniques et causer des problèmes si vous les faites plus d'une fois dans votre code HTML. Les classes peuvent être utilisées plusieurs fois. Deuxièmement, si vous utilisez jQuery, vous pourriez tout aussi bien prendre soin d'assigner des gestionnaires d'événements. Notez que j'ai supprimé vos instructions 'onmouseover'. J'ai également donné un ID au div qui contient le span s.

<div id="container"> 
    <span>程序错误<div class ="content">good</div></span><br> 
    <span>程序错误<div class ="content">good</div></span><br> 
    <span>程序错误<div class ="content">good</div></span><br> 
    <span>程序错误<div class ="content">good</div></span><br> 

    </div> 

Ensuite, dans votre javascript jQuery, affecter l'événement 'mouseover' comme ceci:

$('document').ready(function() { 

    $('#container span').bind('mouseover', function(evt) { 
     $('p#vtip').show(); 

     var xOffset = -10; // x distance from mouse 
     var yOffset = 10; // y distance from mouse 
     var top = (evt.pageY + yOffset); 
     var left = (evt.pageX + xOffset); 

     var str = $(this).children('.content').html(); 
     $('p#vtip .content').html(str); 
     $('p#vtip').css({top: top}).css({left: left}).fadeIn("slow"); 
    }); 

}); 

Cela affectera l'événement mouseover à toutes les portées qui sont un enfant de #container. Vous vous référez à l'élément avec le gestionnaire via 'this', ou $ (this) si vous voulez utiliser les fonctions de jQuery.

Answer 2

Vous avez des problèmes parce que vous avez utilisé le même ID à plusieurs reprises. Ce n'est pas valide, donc le comportement est indéfini. De plus, vous avez bien plus de balisage que nécessaire. Enfin, je voudrais utiliser un plugin infobulle existant plutôt que de rouler vos propres mais si vous êtes si incliné donc le faire, je voudrais commencer par quelque chose comme ceci:

<dl class="tips"> 
    <dt>程序错误</dt><dd>good</dd> 
    <dt>程序错误</dt><dd>good</dd> 
    <dt>程序错误</dt><dd>good</dd> 
    <dt>程序错误</dt><dd>good</dd> 
    <dt>程序错误</dt><dd>good</dd> 
    <dt>程序错误</dt><dd>good</dd> 
</div> 

avec CSS:

dl.tips dt { display: inline; } 
dl.tips dd { display: none; position: absolute; } 

et Javascript:

$(function() { 
    $("dl.tips dd").hover(function(evt) { 
    $(this).next().show().css({ 
     top: evt.pageY - 10, 
     left:} evt.pageX + 10 
    }); 
    }, function() { 
    $(this).next().hide(); 
    }); 
}); 

Maintenant, cela ne définira l'emplacement de l'info-bulle qu'une seule fois. Si vous souhaitez suivre le mouvement de la souris, utilisez mousemove() et mouseout() au lieu de hover().

Cette méthode évite les manipulations DOM inutiles (et généralement coûteuses) et est beaucoup plus discrète dans le balisage marquant uniquement le conteneur externe avec une classe.

Answer 3

pageX et pageY ne sont pas des propriétés standard de l'objet événement. Ce sont des extensions Firefox et ne fonctionneront pas ailleurs.

Toutefois, jQuery corrige les objets d'événement de souris pour ajouter ces propriétés non standard lorsque votre gestionnaire d'événements est lié à partir d'une méthode jQuery.Ce n'est pas le cas ici car vous utilisez des attributs de gestionnaire d'événements en ligne. Débarrassez-vous de ceux.

De plus, vous avez <div> l'intérieur <span> qui est invalide, et plusieurs éléments avec le même id, ce qui est invalide et souvent ne fonctionne pas, et vous manquez var déclarations à l'intérieur de votre fonction qui pourrait causer des problèmes.

<style> 
    #tipped .content { 
     position: absolute; background: white; border: solid cyan 1px; 
     /* other styling to make it a bubble */ 
    } 
</style> 
<div id="tipped"> 
    <div>程序错误<div class="content">good</div></div> 
    <div>程序错误<div class="content">good</div></div> 
    <div>程序错误<div class="content">good</div></div> 
    <div>程序错误<div class="content">good</div></div> 
</div> 
<script type="text/javascript"> 
    $('#tipped>div .content').hide(); 
    $('#tipped>div').hover(function(event) { 
     $(this).find('.content').css({left: event.pageX-10, top: event.pageY+10}).fadeIn('slow'); 
    }, function() { 
     $(this).find('.content').hide(); 
    }); 
</script>