Question

我想检测div中的id clickdetectiondiv在哪里点击了。我正在使用的代码为我提供了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>

Answer 1

你想使用像jquery或mootools这样的javascript框架，它们有一些函数可以将元素的相对位置提供给你想要以跨浏览器方式编写的任何其他元素。为什么重新发明轮子？

Answer 2

如果你可以使用jquery

$('#A').click(function(e) {   //Default mouse Position 
              alert(e.pageX+ ' , ' + e.pageY);
       });

Answer 3

我想这可以解决：

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

如何检测单击事件发生在div中的位置？

3 个答案: