关于页面中各种坐标

事件对象(event)中的坐标

  • screenX,screenY:鼠标位置相对于用户屏幕水平/垂直偏移量,参照原点为屏幕的左上角。

  • clientX,clientY:参照点为浏览器内容区域(视窗)的左上角,但它不会随着滚动条而变动。

  • pageX,pageY:参照点为浏览器内容区域(页面)的左上角,该参照点会随之滚动条的移动而移动。

  • x,y:跟 clientX,clientY 相同

Dom元素中的坐标

  • offsetLeft,offsetTop:DOM元素的水平/垂直偏移(相对于页面)

getBoundingClientRect

  • top,right,bottom,left:元素上边到 视窗 上/右/下/左的距离

  • width,height:元素的宽高

  • x,y:同 left 和 top

滚动中的坐标

  • scrollTop,scrollLeft:滚动位置到容器上、左的距离
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .outter {
      width: 600px;
      height: 600px;
      padding-top: .1px;
      background-color: #0f0;
      overflow: scroll;
    }
    .inner {
      width: 1600px;
      height: 1600px;
      margin-top: 200px;
      margin-left: 200px;
      background-color: #f00;
    }
  </style>
</head>
<body>
  <script>
    window.onload = function () {
      let outter = document.querySelector('.outter')
      outter.onscroll = function () {
        console.log(this.scrollTop, this.scrollLeft)
      }
    }
  </script>
  <div class="outter">
    <div class="inner"></div>
  </div>
</body>
</html>

坐标关系

下面程序演示这些坐标的关系:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 150%;
    }
    .outter {
      width: 100%;
      height: 100%;
      padding-top: .1px;
      background-color: #0f0;
    }
    .inner {
      width: 400px;
      height: 200px;
      margin-top: 1200px;
      margin-left: 200px;
      background-color: #f00;
    }
  </style>
</head>
<body>
  <script>
    window.onload = function () {
      let inner = document.querySelector('.inner')
      class BoxCoordinate {
        constructor (element) {
          this.ele = window.document.querySelector(element)
          this.offsetLeft = this.ele.offsetLeft
          this.offsetTop = this.ele.offsetTop
        }
      }
      class EventCoordinate {
        constructor (e, boxCoordinate) {
          this.screenX = e.screenX
          this.screenY = e.screenY
          this.pageX = e.pageX
          this.pageY = e.pageY
          this.clientX = e.clientX
          this.clientY = e.clientY
          this.x = e.x
          this.y = e.y
          this.clickX = e.pageX - boxCoordinate.offsetLeft
          this.clickY = e.pageY - boxCoordinate.offsetTop
        }
      }
      inner.addEventListener('click', function (e) {
        let boxCoordinate = new BoxCoordinate('.inner')
        let rect = this.getBoundingClientRect()
        let eventCoordinate = new EventCoordinate(e, boxCoordinate)
        console.log(e)
        console.log(rect)
        console.log(boxCoordinate)
        console.log(eventCoordinate)
      }, false)
    }
  </script>
  <div class="outter">
    <div class="inner"></div>
  </div>
</body>
</html>

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress