[英]get mouse position with respect to parent element
这是我的设置
<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将给出不同的值。 这是我的收获。
我的元素可以在视口中的任何位置,当我遍历内部元素时,我应该只获得相对于父级的坐标(不应受父级的影响)
希望我现在明白了。
您可以使用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);
});
其中“特殊”是内部元素的标识。
很有意思,我认为该文档可以为您提供很多帮助。
如果滚动是唯一使您烦恼的事情,那么我认为添加scrollLeft和scrollTop将解决此问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.