Coordinate data in event object

Before learning the coordinate data in the event object, we need to understand the DOM operation - the placeholder of the label

1. Placeholder for labels

In the CSS style, the box model attribute determines the placeholder of a label

Get a placeholder for a label:

1. content + padding + border

label object.offsetWidth label object.offsetHeight

2. Content + padding

label object.clientWidth label object.clientHeight

3. The width of the upper left border line

label object.clientTop label object.clientLeft

4. The distance between the current label and the JavaScript positioning parent

label object.offsetTop label object.offsetLeft

Who is the parent of the location, stored in the .offsetParent property of the label object

If the label has no parent/parent is not positioned, the positioned parent is body, which is the html document

If the label has a parent and the parent has a positioned attribute, the positioned parent is the parent label

If the tab has fixed positioning, the positioning parent is the viewport window

If the label is display:none, the label has no placeholder

2. Coordinate data in the event object

The event object is a parameter in the event processing function, which stores the tag object/related data information that triggers the event, and e.target is the tag object that triggers the event.

e.offsetX e.offsetY

Coordinates relative to the upper left corner of the label object that triggered the event

If there is a p tag nested in the div tag

The clicked p tag e.offsetX e.offsetY is the coordinates relative to the upper left corner of the p tag

The clicked div tag e.offsetX e.offsetY is the coordinates relative to the upper left corner of the div tag

e.clientX e.clientY

Relative to the top left corner of the viewport window

e.pageX and.pageY

Coordinates relative to the upper left corner of the HTML

3. Case: mouse click follow (click event)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 600px;
      height: 600px;
      padding: 100px;
      border: 20px solid paleturquoise;
      background: rgb(160, 241, 160);
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 200px auto;
      position: relative;
    }

    p {
      width: 50px;
      height: 50px;
      padding: 50px;
      border: 10px solid orange;
      background: pink;
      position: absolute;
    }
  </style>
</head>

<body>
  <div>
    <p></p>
  </div>

  <script>
    //获取标签对象
    var oDiv = document.querySelector('div');
    var oP = document.querySelector('p');

    //给div绑定点击事件
    //将事件类型可以换为 mousemove
    oDiv.addEventListener('click', function (e) {
      //获取父级占位（内容+padding）
      let oDivWidth = oDiv.clientWidth;
      let oDivHeight = oDiv.clientHeight;

      //获取子级占位（内容+padding+border）
      let oPWidth = oP.offsetWidth;
      let oPHeight = oP.offsetHeight;

      //获取父级标签到页面的距离
      let oDivLeft = oDiv.offsetLeft;
      let oDivTop = oDiv.offsetTop;

      //获取父级标签边框线宽度
      let oDivBorderLeft = oDiv.clientLeft;
      let oDivBorderTop = oDiv.clientTop;
      //计算p定位数据 
      //点击定位 - 父级外边距 - 父级边框线 - 子级占位/2
      let x = e.pageX - oDivLeft - oDivBorderLeft - oPWidth / 2;
      let y = e.pageY - oDivTop - oDivBorderTop - oPHeight / 2;

      //设定极值
      //设定最小值
      x = x < 0 ? 0 : x;
      y = y < 0 ? 0 : y;
      //设定最大值:父级占位(内容+padding) - 子级占位(内容+padding+border)
      x = x > oDivWidth - oPWidth ? oDivWidth - oPWidth : x;
      y = y > oDivHeight - oPHeight ? oDivHeight - oPHeight : y;

      oP.style.left = x + 'px';
      oP.style.top = y + 'px';

    })
  </script>
</body>

</html>

Coordinate data in event object

1. Placeholder for labels

2. Coordinate data in the event object

3. Case: mouse click follow (click event)

Guess you like