const box = document.querySelector(".box");

function calcOffset() {
  // 不包含滚动距离
  const offsetWidth = box.offsetWidth;
  const offsetHeight = box.offsetHeight;
  const offsetLeft = box.offsetLeft;
  const offsetTop = box.offsetTop;
  
  
  // offsetRight 是不存在的。 记住了！
  // offsetBottom 也是不存在的！
  const offsetRight = box.offsetRight;
  const offsetBottom = box.offsetBottom;

  console.log("content+padding+border", offsetWidth);
  console.log("content+padding+border", offsetHeight);
  console.log('offsetLeft', offsetLeft);
  console.log('offsetRight 不存在的属性', offsetRight);
  // 这里的offsetTop等于box的父级body元素的padding 10px +margin 8px
  console.log('offsetTop', offsetTop);
  console.log('offsetBottom 同样不存在offsetBottom', offsetBottom)
}


function scrollCalc(){
  const scrollWidth = box.scrollWidth;
  const scrollHeight = box.scrollHeight;
  const scrollTop = box.scrollTop;
  const scrollLeft = box.scrollLeft;
  
  // 与offsetXXX一致，scrollXXX也没有scrollRight和scrollBottom
  
  // 表示滚动区域的宽度，这里计算方式为 box的padding-left 20px + .content元素的width400px
  // 所以 scrollWidth = 420px
  console.log('scrollWidth', scrollWidth);
  
  // scrollHeight表示滚动区域的高度
  // 这里content的height为300px .wrapper的height为 23px
  // 再加上box的paddingtop/bottom 20*2，所以300+23+20*2 = 363px;
  console.log('scrollHeight', scrollHeight);
  
  // 表示滚动条垂直滚动的距离
  console.log('scrollTop', scrollTop);
  
  // scrollLeft 表示滚动条 水平滚动的距离
  console.log('scrollLeft', scrollLeft);
}

function clientCalc(){
  const clientWidth = box.clientWidth;
  const clientHeight = box.clientHeight;
  const clientTop = box.clientTop;
  const clientLeft = box.clientLeft;
  
  // 表示box元素的width不包含滚动部分，也不包含box的border
  // 包含box的内容width和padding-left/right
  console.log('clientWidth', clientWidth);
  
  // 表示box元素的高度，不包含滚动部分，同样不包含box的border
  // 包含box的height和padding-top/bottom
  console.log('clientHeight', clientHeight)
  
  // 指的是box元素的边框的宽度
  console.log('cilentTop', clientTop);
  console.log('clientLeft', clientLeft);
  
}



document.querySelector("button").addEventListener("click", function(event) {
  // calcOffset();
  // scrollCalc();
  // clientCalc();
});

document.addEventListener('click', function(event){
  // 鼠标点击的位置，相对body，包含被滚动的body内容的距离
  console.log('pageX', event.pageX)
  console.log('pageY', event.pageY)
  
  // 点击位置距离当前body可视区域的x轴坐标
  console.log('clientX', event.clientX);
  // 点击位置距离当前body可视区域y轴的坐标
  console.log('clientY', event.clientY);
  // 相对于带有定位的父盒子的x，y坐标
  console.log('offsetX', event.offsetX);
  console.log('offsetY', event.offsetY);
  
  // 点击的位置，距离当前电脑屏幕的x，y坐标
  console.log('screenX', event.screenX);
  console.log('screenY', event.screenY);
  
  // = pageX、pageY
  // 点击位置，相对body，包含滚动的body的内容的距离
  console.log('x', event.x);
  console.log('y', event.y);
})