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

Question

这是我的设置

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

现在，当用户单击内部元素时，我想要相对于父div而不是页面的鼠标位置。

这是我尝试过的。

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

仅当我不滚动页面时，此方法才能正常工作。 无论我的元素在同一页面上的什么位置，我都希望函数返回相同的值。

更新 ：

我认为还不够清楚。 现在要详细说明。

考虑元素在文档中相对于文档位于x位置。 该页面具有滚动条。 现在我可以滚动到页面的任何部分，并且位置仍然是x。 但相对于视口的位置将发生变化。 因此pageX和pageY将给出不同的值。 这是我的收获。

我的元素可以在视口中的任何位置，当我遍历内部元素时，我应该只获得相对于父级的坐标（不应受父级的影响）

希望我现在明白了。

Answer 1

您可以使用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>

请注意，给出的像素值是相对于整个文档的。 如果要计算特定元素内或视口内的位置，可以查看offsetY和offsetX，并做一些算术运算以找到相对值。

这是在特定元素而不是页面中查找位置的示例：

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

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

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

其中“特殊”是内部元素的标识。

Answer 2

很有意思，我认为该文档可以为您提供很多帮助。

Answer 3

如果滚动是唯一使您烦恼的事情，那么我认为添加scrollLeft和scrollTop将解决此问题。