问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

获取点击位置在元素中的坐标

头像
wing_kai
    65722437

    现在有如下结构

    图片描述

    <html>
<body>
    <div id="a">
        <div id="b"></div>
    </div>
</body>
</html>

    • a的高度比b小，且a可以滚动。超出a的部分不显示。

    • a与html之间有若干节点，且样式不固定

    当我在b元素内点击时，我要如何获取这个点击的位置，相对于b左上角的坐标

    htmlcssjavascript
    阅读 9.8k
    2 个回答
    得票最新
    头像
    黎明星刻
      56222329
       <!DOCTYPE html>
<html>
<head>
  <style>
    div{
      margin-left:30px;
      height:200px;
      width:200px;
      border:1px solid black;
    }
  </style>
 
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
   <script>
    $("document").ready(function(){
  $("#b").bind('mousemove',function(e){    
    var X=e.pageX-$(this).offset().left;
    var Y=e.pageY-$(this).offset().top;
     $("#b").text("left"+X+",top"+Y)
  })
});
  </script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="b">
    
  </div>
</body>
</html>
      头像
      超人666
        1.4k4
        function getElementPosition(e) {
    var box = e.getBoundingClientRect();
    var offsets = getScrollOffsets();
    return {
        x: box.left + offsets.x,
        y: box.top + offsets.y
    }
}

function getScrollOffsets(w) {
    w = w || window;
    //除了ie8及更早版本，其他浏览器都可以使用
    if (w.pageXOffset != null) {
        return {
            x: w.pageXOffset,
            y: w.pageYOffset
        }
    }
    //对于标准模式向的IE（或任何浏览器）
    var d = w.document;
    if (document.compatMode == 'CSS1Compat') {
        return {
            x: d.documentElement.scrollLeft,
            y: d.documentElement.scrollTop
        };
    }
    //对怪异模式下的浏览器
    return {
        x: d.body.scrollLeft,
        y: d.body.scrollTop
    };
}
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题