pourquoi dans firefox c'est ok, mais dans ie8 il imprime 'undefined undefined'?

Question

<div> 
    <span onmouseover="tip(event,this);">程序错误<div class="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div class="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div class="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div class="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div class="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div class="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div class="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div class="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> 

<script> 

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

     xOffset = -10; // x distance from mouse 
     yOffset = 10; // y distance from mouse 
     alert(evt.pageY+' '+evt.pageX) 
} 
</script> 

dans Firefox, il est ok, mais dans IE8 il imprimer 'undefined undefined'

Answer 1

Comme indiqué, si vous allez faire cela avec straight JS, vous devrez utiliser pageY/pageX pour la plupart des navigateurs et clientX/clientY pour IE.

Puisque vous utilisez jQuery (je vois que vous avez $ ('p # vtip'). Show(), vous pouvez également utiliser jQuery pour lier les événements. jQuery normalise également la façon dont vous pouvez accéder aux attributs d'événement dans les navigateurs lorsque vous l'utilisez pour lier les événements au lieu des événements en ligne que vous utilisez actuellement. Voir le jQuery event docs.

Voici un exemple de configuration différente du code HTML. Donnez une classe aux travées et enlevez l'onmouseover.

<span class='tipped'>程序错误<div class="content">good</div></span><br> 

Affectez l'événement mouseover aux segments avec jQuery.

<script> 
    $('.tipped').mouseover(function(evt){ 
    $('p#vtip').show(); 

    xOffset = -10; // x distance from mouse 
    yOffset = 10; // y distance from mouse 
    alert(evt.pageY+' '+evt.pageX)//this should work fine in IE too, since it's a jQuerified event object 
    }); 
</script> 

Answer 2

IE utilise clientX/clientY, pas pageX/pageY.

Answer 3

IE ne prend pas en charge event.pageY/event.pageX. Utiliser event.clientX, event.offsetX ou event.x

Answer 4

En fait, il y a un bogue dans Vtip, je viens pas trouvé exactement là où il est parce que ce n'est pas 100% reproductible. Je peux le reproduire environ 50% du temps. Je reçois également le "non défini" sur le texte de la pointe, mais ce n'est pas dans le code HTML! jQuery/vtip produit/affiche le texte "indéfini". Si je fais une source de vue sur la sortie réelle, le texte attendu est présent dans le contenu de la balise de titre, mais si je le souris, il affiche "non défini". Si je recharge la page, cela fonctionne correctement. Donc, il y a certainement un bug.
En outre, ce n'est pas une certaine ligne sur la page qui provoque le "non défini". Il semble être aléatoire, et c'est toujours juste une rangée.

Très étrange. Toujours à la recherche de voir qui a corrigé ce bug.