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 event docs。

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

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

使用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不支持event.pageY / event.pageX。使用event.clientX，event.offsetX或event.x

Answer 3

IE使用clientX / clientY，而不是pageX / pageY。

Answer 4

实际上，VTip中存在一个错误，我还没有找到它的确切位置，因为它不是100％可重复的。我可以在50％的时间内重现它。我也在提示文本上得到“未定义”，但它不在html中！ jQuery / vtip正在生成/显示“未定义”文本。如果我在实际输出上执行查看源，则标题标记内容中会出现预期文本，但如果我将其鼠标悬停在其上，则显示“未定义”。如果我重新加载页面，它可以正常工作。所以，肯定存在一个错误此外，页面上的任何行都不会导致“未定义”。它似乎是随机的，它总是只有一行。

很奇怪。仍然在寻找谁修复了这个错误。

为什么在Firefox中它没关系，但是在ie8中打印'undefined undefined'？

4 个答案: