为什么在Firefox中它没关系,但是在ie8中打印'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>

在Firefox中它没关系,但在ie8中打印'undefined undefined'

Answer 1

如上所述,如果您要使用直接JS进行此操作,则必须对大多数浏览器使用pageY/pageX,对IE使用clientX/clientY.

既然你正在使用jQuery(我看到你有$('p#vtip').show();在那里),你也可以使用jQuery绑定事件.当您使用它来绑定事件而不是您现在使用的内联事件时,jQuery还将规范化跨浏览器访问事件属性的方式.

请参阅jQuery事件文档.

这是一个如何以不同方式设置html的示例.给跨度一个类并删除onmouseover.

<span class='tipped'>????<div class="content">good</div></span><br>

使用jQuery将mouseover事件分配给跨度.

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