javascript - 为什么在 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 来绑定(bind)事件。当您使用 jQuery 来绑定(bind)事件而不是您现在使用的内联事件时，jQuery 还将标准化您可以跨浏览器访问事件属性的方式。

参见 jQuery event docs .

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

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

使用 jQuery 将鼠标悬停事件分配给 span。

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