javascript - 如何获取与单击的 div 边框相关的 [x,y] 位置?

标签 javascript

如何获取与点击的div边框相关的[x,y]位置?

点击框的位置是随机的,下面的例子只是一种情况。我想获取与点击的div相关的点击点位置,如何在js中做到这一点?

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>img click positon</title>
</head>
<body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.clickbox').bind('click',function(e){
                // how to get [x,y] positon relatived to div.clickbox ?
                // console.log(x,y);
            })
        });
    </script>
    <style type="text/css">
        *{margin:0;padding:0}
        .page{margin:0 auto; width:940px}
        .box{width:200px; margin:0 auto; margin-top:10%}
        .clickbox{width:100%; height:230px;background-color:tan;}
    </style>
    <div class="page">
        <div class="box">
            <div class="clickbox"></div>
        </div>
    </div>
</body>
</html>

enter image description here

最佳答案

$('div.clickbox').click(function(e) {
    var offset = $(this).offset();
    console.log("X: "+e.clientX - offset.left);
    console.log("Y: "+e.clientY - offset.top);
});

关于javascript - 如何获取与单击的 div 边框相关的 [x,y] 位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19219280/

相关文章:

javascript - 为什么我难以通过 href ="element"滚动?

javascript - jQuery 模板插件和数据持久性

javascript - Jquery 多选事件处理程序

javascript - 使用不带html文件的dart:js库

Firefox windows 7 中的 javascript 错误,在其他浏览器和操作系统中工作

javascript - 用于网络音频 api 的声音库

javascript - Javascript 输入中的逗号分隔数字

javascript - 如何在 Angular 4 中设置表单值?

javascript - 如何将 webpack DLL 注入(inject)到现有的 HTML 中?

javascript - 对 3 个嵌套数组感到困惑