<div style="width: 100px; height: 100px; background-color: gray" class='centre'></div>
<div style='display:flex'>
  <div class='xCord'>
  </div> &nbsp;
  <div class='yCord'>
  </div>
</div>
<div style='display:flex'>
  <div class='xCordP'>
  </div> &nbsp;
  <div class='yCordP'>
  </div>
</div>

let target  =  document.getElementById('target')
let ispressed = false;
document.querySelector('.centre')
.addEventListener('mousedown', function(){
  ispressed = true
})
document.querySelector('.centre')
.addEventListener('mouseup', function(){
  ispressed = false
})
document.querySelector('.centre')
  .addEventListener('mousemove', function (){
   console.log(event)
    let xCord = event.clientX;
    let yCord = event.clientY;
  
    document.querySelector('.xCord').textContent = `Xcord: ${xCord}`;
    document.querySelector('.yCord').textContent = `Ycord: ${yCord}`;
  
  if(ispressed){
    document.querySelector('.xCordP').textContent = `Xcord: ${xCord}`;
    document.querySelector('.yCordP').textContent = `Ycord: ${yCord}`;
  }
  else{
     document.querySelector('.xCordP').textContent = `nothing`;
     document.querySelector('.yCordP').textContent = `nothing`;
  }
});