jQuery鼠标位置相对于窗口的坐标

Question

jQuery鼠标位置相对于窗口的坐标

positionjquery

17

我想获取鼠标相对于窗口的精确位置。

这是我的问题...

document.height = 1600（实际文档大小）
window.height = 400（可视高度）

我需要确定鼠标相对于窗口的位置，而不是相对于页面的位置，而pageY属性提供的是相对于页面的位置。

这是为了一个大型工具提示，当鼠标悬停在表项上时弹出。如果屏幕底部没有足够的空间（窗口已最大化），则工具提示将显示在指针上方，否则将显示在指针下方。但是，当文档大小大于页面大小（长表格）时，就会出现问题。

谢谢， Luc

- user425772

4个回答

4

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

- Marian

1

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

我认为这正是您所寻找的。详细信息请参见 Mozilla Developer 这里。

- Jimba Tamang

0

关于document.body.scrollTop属性，它包含了您已经滚动的像素。我相信一个简单的pageY - scrollTop就足够了吧？

- jpluijmers

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Craver · Accepted Answer

通过减去 window 的 .scrollTop() 值，可以得到相对于窗口的页面位置，如下所示：

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

你可以在这里尝试一下，并查看控制台。