<div>
<p></p>
</div>
* {
margin: 0;
padding: 0;
}
body {
height: 5000px;
}
div {
width: 300px;
height: 300px;
border: 20px solid #000;
margin: 50px auto;
position: relative;
}
p {
width: 50px;
height: 50px;
background: pink;
position: absolute;
top: 0;
left: 0;
}
var oDiv = document.querySelector('div');
var oP = document.querySelector('p');
var oDivLeft = oDiv.offsetLeft;
var oDivTop = oDiv.offsetTop;
var oDivBorderLeft = oDiv.clientLeft;
var oDivBorderTop = oDiv.clientTop;
var oDivWidth = oDiv.clientWidth;
var oDivHeight = oDiv.clientHeight;
var oPWidth = oP.offsetWidth;
var oPHeight = oP.offsetHeight;
oDiv.addEventListener('click', function (e) {
var x = e.pageX - oDivLeft - oDivBorderLeft - oPWidth / 2;
var y = e.pageY - oDivTop - oDivBorderTop - oPHeight / 2;
x = x < 0 ? 0 : x;
y = y < 0 ? 0 : y;
x = x > oDivWidth - oPWidth ? oDivWidth - oPWidth : x;
y = y > oDivHeight - oPHeight ? oDivHeight - oPHeight : y;
oP.style.left = x + 'px';
oP.style.top = y + 'px';
})
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c50ab9664bc49c6b2c4d14e5033e7301.gif#pic_center)