search

Home  >  Q&A  >  body text

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

现在有如下结构

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

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

PHP中文网PHP中文网2816 days ago361

reply all(2)I'll reply

  • 黄舟

    黄舟2017-04-10 17:47:45

     <!DOCTYPE html>
<html>
<head>
  <style>
    p{
      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>
  <p id="b">
    
  </p>
</body>
</html>

    reply
    0
  • 大家讲道理

    大家讲道理2017-04-10 17:47:45

    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
    };
}

    reply
    0
  • Cancelreply