Как запретить событие родителя дочернему элементу?

let offsetX;
let offsetY;
let parent = document.getElementById("parent");

function moveParent() {
  parent.addEventListener("dragstart", function(event) {
    offsetX = event.offsetX;
    offsetY = event.offsetY;
  })

  parent.addEventListener("dragend", function(event) {
    parent.style.top = (event.pageY - offsetY) + "px";
    parent.style.left = (event.pageX - offsetX) + "px";
  })
}
moveParent();

#parent {
  background-color: gray;
  height: 200px;
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

#son {
  background-color: yellow;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 0;
  right: 0;
}

<div id="parent" draggable="true">
  <div id="son"></div>
</div>