<!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>
html,
body {
height: 1000px;
}
div {
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div>
</div>
<script>
//e.pageX , e.pageY点击区域到页面距离 适合用于盒子拖拽 绑定时搭配按下事件使用更加合适
//e.offsetX,e.offsetY 点击的点在自身距离的边缘 ,适合绑定给块级元素 来获取鼠标点击的点到自身距离的边缘
//e.clientX,e.clicentY 点击的点到可视区域的距离 ,适合用于body宽高在百分百的情况下
//e.scrennX,e.screenY 点击的点到屏幕距离,作用 作者都没用到过
let box = document.querySelector("div")
box.onmousedown = function (e) {
console.log(e.offsetX)
console.log(e.offsetY)
}
</script>
</body>
</html>