Как не дать элементу установленному на картинки выйти за его рамки

const lea = document.querySelector("#lea"); 
const ball = document.querySelector("#ball"); 
 
 
ball.style.left = 0 + "px"; 
ball.style.top = 0 + "px"; 
 
lea.onclick = function(e) { 
  ball.style.left = e.pageX - ball.offsetWidth / 2 + "px"; 
  ball.style.top = e.pageY - ball.offsetHeight / 2 + "px"; 
 
  if (lea.offsetHeight - 25 < e.pageY) { 
    ball.style.top = lea.offsetHeight - 25 + "px"; 
  } 
 
  if (lea.offsetWidth - 25 < e.pageX) { 
    ball.style.left = lea.offsetWidth - 25 + "px"; 
  } 
 
  if (e.pageY < ball.offsetHeight / 2) { 
    ball.style.top = 0 + "px"; 
  } 
  if (e.pageX < ball.offsetWidth / 2) { 
    ball.style.left = 0 + "px"; 
  } 
};

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body { 
  width: 100vw; 
  height: 100vh; 
} 
 
#lea { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  background: green; 
} 
 
#ball { 
  position: absolute; 
  width: 25px; 
  height: 25px; 
  border-radius: 50%; 
  background: red; 
  transition: all 1s; 
}

<div id="lea"> 
  <div id="ball"></div> 
</div>