<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取箭头点击位置</title>
<style>
.pBox{
display: inline-block;
width: 300px;
height: 300px;
border: solid 10px yellowgreen;
/* position: absolute;
top: 20px;
left: 20px; */
}
#box{
width: 200px;
height: 200px;
background-color: tomato;
}
</style>
</head>
<body>
<div class="pBox"></div>
<div class="pBox">
<div id="box"></div>
</div>
<script>
var box = document.querySelector('#box');
box.addEventListener('click', function(e){
// 获取当前鼠标距离box左上的位置
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
box.innerHTML = `x坐标：${x}，y坐标：${y}`;
})
</script>
</body>
</html>
这是我的代码，为什么点击box后，盒子往下移动了呢？
