3

我想检测我点击了 id 为 clickdetectiondiv 的 div 中的哪个位置。我使用的代码为我提供了相对于 HTML 页面正文左上角的位置。我花了很多时间来弄清楚如何做到这一点，但无法找到答案。我有一个解决方案是减去这个绝对定位的 div 的位置。但并不总是我会得到 div 的位置，因为屏幕尺寸可能会有所不同。请告诉我另一种方法来做到这一点。

提前致谢，

<html>
<head>
<script type="text/javascript"> 
function clicked(event){
    var x=event.clientX
    var y=event.clientY
    document.getElementById("outputdiv").innerHTML= "X coords: " + x + ", Y coords: " + y;
}
</script>

<style type="text/css">
#clickdetectiondiv{
    position: absolute;
    top: 100px;
    left: 100px;
    height: 100px;
    width: 500px;
    background: gray;
}
#outputdiv{
    position: absolute;
    top: 300px;
    left: 100px;
    height: 100px;
    width: 500px;
    background: #eee;
    text-align: center;
}
</style>

</head>

<body>
<div id="clickdetectiondiv" onmousedown="clicked(event);"></div>
<div id="outputdiv"></div>
</body>

</html>
4

3 回答 3

0

您想使用像 jquery 或 mootools 这样的 javascript 框架，它们具有获取元素相对于您想要以跨浏览器方式编写的任何其他元素的相对位置的功能。为什么要重新发明轮子？

于 2012-10-12T10:43:32.470 回答
0

如果你可以使用jquery 

$('#A').click(function(e) {   //Default mouse Position 
              alert(e.pageX+ ' , ' + e.pageY);
       });
于 2012-10-12T10:45:12.753 回答
0

我想这可以是解决方案：

function clicked(event){
    var x = event.x;
    var y = event.y;

    var divClicked = document.getElementById("clickdetectiondiv");

    x -= divClicked.offsetLeft;
    y -= divClicked.offsetTop;
    document.getElementById("outputdiv").innerHTML= "X coords: " + x + ", Y coords: " + y;
}
于 2012-10-12T10:54:46.780 回答