3

ID clickdetectiondiv の div のどこでクリックしたかを検出したい。私が使用しているコードは、HTML ページの本文の左上に対する位置を示しています。これを行う方法を理解するのに多くの時間を費やしましたが、答えを見つけることができません。私が持っている1つの解決策は、この絶対位置の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

これが解決策になると思います：

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 に答える
0

jqueryが使えるなら 

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