why in firefox it is ok, but in ie8 it print '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>

in firefox it is ok, but in ie8 it print 'undefined undefined'

Answer 1

IE uses clientX / clientY, not pageX / pageY.

Answer 2

IE doesn't support event.pageY/event.pageX. Use event.clientX, event.offsetX or event.x

Answer 3

As noted, if you are going do this with straight JS, you'd have to use pageY/pageX for most browsers and clientX/clientY for IE.

Since you're using jQuery (I see you have $('p#vtip').show(); in there), you might as well use jQuery to bind the events, too. jQuery will also normalize the way you can access the event attributes across browsers when you use it to bind the events instead of the inline events you're using now.

See the jQuery event docs.

Here's an example of how to set up the html differently. Give the spans a class and remove the onmouseover.

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

Assign the mouseover event to the spans with 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>