Javascript 获取鼠标相对于父元素的位置_Javascript_Jquery

Javascript 获取鼠标相对于父元素的位置

javascript jquery

Javascript 获取鼠标相对于父元素的位置,javascript,jquery,Javascript,Jquery,这是我的设置 <div id="uxcParent"> <div id="uxcClickable"></div> </div> 只有当我不滚动页面时，这才可以正常工作。我希望函数返回相同的值，无论我的元素在同一页的何处更新：我觉得还不够清楚。我现在正在详细介绍考虑元素在文档中相对于文档的x位置。该页面有一个滚动条。现在我可以滚动到页面的任何部分，位置仍然是x。但是相对于视图端口的位置会发生变化。所以pageX和pageY将给出不同的值。

这是我的设置

<div id="uxcParent">
 <div id="uxcClickable"></div>
</div>

只有当我不滚动页面时，这才可以正常工作。我希望函数返回相同的值，无论我的元素在同一页的何处

更新：

我觉得还不够清楚。我现在正在详细介绍

考虑元素在文档中相对于文档的x位置。该页面有一个滚动条。现在我可以滚动到页面的任何部分，位置仍然是x。但是相对于视图端口的位置会发生变化。所以pageX和pageY将给出不同的值。这是我的圈套

我的元素可以在视图端口中的任何位置，当我浏览内部元素时，我应该只获得与父元素的坐标（不应该受到父元素所在位置的影响）

希望我现在明白了。

这很有趣，我认为可以帮助您很多。

您可以使用jquery这样做：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})
</script>
<body>

<h2 id="status2">
0, 0
</h2>
<div style="width: 100px; height: 100px; background:#ccc;" id="special">
Click me anywhere!
</div>
</body>
</html>

其中“special”是内部元素的id。

如果滚动是唯一让您混乱的事情，那么我认为添加scrollLeft和scrollTop可以解决问题。

这是一个输入错误，或者实际上在代码中您将Y坐标引用到了x变量？这是一个输入错误。.已经更改。.我在jquery文档中看到了这一点。这不是我的问题。。我会更新我的问题，让它更清楚。。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})
</script>
<body>

<h2 id="status2">
0, 0
</h2>
<div style="width: 100px; height: 100px; background:#ccc;" id="special">
Click me anywhere!
</div>
</body>
</html>

$("#special").click(function(e){

    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;

      alert(x +', '+ y);
   });