CODEWITHSUNDEEP
javascriptjquery
zjm1126
zjm1126

Reputation: 66647

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

<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'

Upvotes: 1

Views: 2398

Answers (4)

Kelly
Kelly

Reputation: 11

Actually, there is a bug in VTip, I just haven't found exactly where it is because it's not 100% reproducable. I can reproduce it about 50% of the time. I also get the "undefined" on the tip text, but it's not in the html! jQuery/vtip is producing/showing the "undefined" text. If I do a View Source on the actual output, the expected text is there in the title tag content, but if I mouseover it, it shows "undefined". If I reload the page, it works correctly. So, there's definitely a bug.
Also, it's not any certain row on the page that causes the "undefined". It appears to be random, and it's always just one row.

Very strange. Still searching to see who has fixed this bug.

Upvotes: 1

JAL
JAL

Reputation: 21563

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>

Upvotes: 5

Ilya Volodin
Ilya Volodin

Reputation: 11256

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

Upvotes: 2

bdl
bdl

Reputation: 1502

IE uses clientX / clientY, not pageX / pageY.

Upvotes: 1

Related Questions