Question

我试图获得相对于窗口的精确鼠标位置。

这是我的问题......

document.height = 1600（实际文件大小）
window.height = 400（可见）

我需要找出相对于窗口的鼠标位置，而不是pageY属性提供的文档。

这是一个大工具提示，它会在mouesover上弹出一个表项。如果屏幕底部没有足够的空间（窗口最大），则工具提示将显示在指针上方，否则显示在指针下方。这工作正常，直到文档大小大于pagesize（长表）。

谢谢， LUC

Answer 1

您可以从pageY中减去window的{{3}}以获取窗口中的位置，如下所示：

var top = e.pageY - $(window).scrollTop();

.scrollTop()

Answer 2

那么window.pageYOffset呢？

演示：

<html>
<head>
<style>
    html,body {padding:0;margin:0}
    #content {height:2048px;background-color:#ccc;}
    #status {position:fixed;top:0;left:0;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   $(document).mousemove(function(e){
      $('#status').html(e.pageX +', '+ (e.pageY - window.pageYOffset));
   }); 
})
</script>
<body>
<h2 id="status">0, 0</h2>
<div id="content"></div>
</body>
</html>

Answer 3

document.body.scrollTop属性如何，它包含您滚动的像素。我相信一个简单的pageY - scrollTop应该足够吗？

Answer 4

function showCoords(evt){
  alert(
    "clientX value: " + evt.clientX + "\n"
    + "clientY value: " + evt.clientY + "\n"
  );
}

我认为这就是你要找的东西。详见here from Mozilla Developer。

jquery鼠标位置相对窗口

4 个答案: