以click.box的CENTER作为原点保存鼠标点击坐标

我想在html网页中编写一些代码，这样当用户单击我的ClickBox中的鼠标时，X和Y坐标将被保存，然后发送到我的数据库。以click.box的CENTER作为原点保存鼠标点击坐标

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

<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正在坐标原点？

由于提前，

来源

2014-02-17 Joshua

让您clickbox的坐标和措施，以及 - 在那之后，它是几个简单的数学运算。 – CBroe

坐标相对于顶部和左侧。

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

要使用Clickbox的中心获取的坐标为原点

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

来源

2014-02-17 10:22:17

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

但你可以在div鼠标位置的除去顶部和您的DIV从身体左侧距离

来源

2014-02-17 10:15:14 Ajouve

您需要删除div的偏移：

Demo

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

来源

2014-02-17 10:16:05 enyce12

谢谢，但你知道为什么在演示中坐标显示为整数，而在我的浏览器中作为浮点数，有很多小数位？！ – Joshua

@enyce12你的代码显示x和y坐标的警报，但我需要点击文本区域，当我在文本区域保存一些东西，并提交它应该保存在分贝，并显示在框中与一些指针，当悬停或点击它可以节省价值。 –

以click.box的CENTER作为原点保存鼠标点击坐标

回答

相关问题