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);
   });

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

Answer 2

这很有趣，我认为this document可以帮到你很多。

Answer 3

如果滚动是唯一弄乱你的东西那么我会认为添加scrollLeft和scrollTop会解决问题。

获取关于父元素的鼠标位置

3 个答案: