我正在尝试在 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 是坐标 < strong>来源?
提前致谢
最佳答案
相对于顶部和左侧的坐标。
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);
关于javascript - 以 click.box 的 CENTER 为原点保存鼠标点击坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21826122/