Question

我正在尝试在html网页中编写一些代码，以便当用户在ClickBox中单击鼠标时，X和Y坐标会被保存，然后发送到我的数据库。

但是现在，点击处理程序......这是我有多远：

<body>
    <div id = "ClickBox" style = "left:100px;"> </div>
</body>



<script>
    $( document ).ready( function(e)
    {
            $( '#ClickBox' ).click( function(e)
        {
                alert( e.pageX + ' , ' + e.pageY );
        });
    });
</script>



<style type="text/css">
     #ClickBox { width:640px; height:480px; cursor:pointer; background:#2f2f2f; top:50px; color:#fff; font:bold 12px Arial; }
</style>

它可以工作，但显示点击坐标的方式很明显，原点不是我的ClickBox的中心或左上角。如何修改这些片段，以便无论我的ClickBox位于我的网页上的哪个位置，我总是得到 ClickBox 的 center 作为坐标的精确坐标来源

提前致谢，

Answer 1

e.pageX和a.pageY是页面中四个光标的位置，而不是特定的div。

但是您可以在div中获取鼠标位置，从而消除div与身体的顶部和左侧距离

Answer 2

您需要删除div的偏移量：

Demo

$( '#ClickBox' ).click( function(e){
    var coordX = e.pageX - $(this).offset().left,
        coordY = e.pageY - $(this).offset().top;
    alert( coordX + ' , ' + coordY );
});

Answer 3

相对于左上角和左上角的坐标。

coordX = e.pageX - $('#clickbox').offset().left;
coordY = e.pageY - $('#clickbox').offset().top;

获取Clickbox的CENTER作为原点的坐标

coordX = e.pageX - $('#clickbox').offset().left - ($('#clickbox').width() * 0.5);
coordY = e.pageY - $('#clickbox').offset().top - ($('#clickbox').height() * 0.5);

使用click.box的CENTER作为原点保存鼠标单击坐标

3 个答案: