gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 13:40:36 26 4
gpt4 key购买 nike

这是我的设置

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

现在,当用户点击内部元素时,我希望鼠标位置相对于父 div 而不是页面。

这是我尝试过的。

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

只有当我不滚动页面时,它才能正常工作。无论我的元素在同一页面上的哪个位置,我都希望该函数返回相同的值。

更新:

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

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

我的元素可以在视口(viewport)中的任何地方,当我遍历内部元素时,我应该只获得相对于父元素的坐标(不应受父元素所在位置的影响)

希望我现在清楚了。

最佳答案

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

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

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

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

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

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

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

关于javascript - 获取鼠标相对于父元素的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2515369/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com