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

标签 javascript php jquery html css

我正在尝试在 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 在我的网页上的什么位置,我总是得到精确的坐标,我的 ClickBoxcenter 是坐标 < 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/

相关文章:

php mysql 搜索

javascript - Jquery Range Slider - 低填充部分 - 如何填充背景色

javascript - AngularJS ng-show 与 map 一起使用时不会触发

javascript - 为什么不能在 ngFor 中使用 var 而不是 let

javascript - 获取 next.js 中不是动态路由参数的查询参数

php - Mysql_num_rows() 问题

php json 编码 - 数组键不输出为字符串

javascript - JQuery/Javascript 内联回调

javascript - 取消上传 Angular-evalate

javascript - 突变摘要库 : How to append html elements to added elements