让div元素随着光标在特定的父级div内移动

HTML 代码：

<div class="parent">
  <div class="child"></div>
</div>

CSS 代码：

.parent {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

.child {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  pointer-events: none;
}

JavaScript 代码：

var parent = document.querySelector('.parent');
var child = document.querySelector('.child');

parent.addEventListener('mousemove', function(event) {
  var x = event.pageX - parent.offsetLeft;
  var y = event.pageY - parent.offsetTop;

  child.style.left = x + 'px';
  child.style.top = y + 'px';
})