I have a code for draggable element

var offsetX;
var offsetY;
Element.prototype.makeDraggable=function(){
  var o=this
  o.onmousedown=function(e){
     offsetX=e.pageX-parseInt(o.style.left)
     offsetY=e.pageY-parseInt(o.style.top)

    document.onmousemove=function(e) {
      o.style.left=Math.min(Math.max(e.pageX-offsetX,o.parentNode.clientWidth-o.clientWidth),0)+'px';
      o.style.top=Math.min(Math.max(e.pageY-offsetY,o.parentNode.clientHeight-o.clientHeight),0)+'px';
    }
    document.onmouseup = function(e) {
      document.onmousemove=o.onmouseup=null
    }
  }
  o.ondragstart = function(){return 0}
}
document.getElementById('object1').makeDraggable();

let spot = document.querySelectorAll('#grid-holder > div');
for(var i = 0; i < spot.length; i ++)
{
  spot[i].onclick = function(){ inventar(); };
}
function inventar()
{
  alert();
}

<div id="parent">
  <div id="object1" style="left: 1px; top: 1px;">

     <div class="grid-holder" id="grid-holder">
         <div></div><div></div><div></div>
         <div></div><div></div><div></div>
         <div></div><div></div><div></div>
         <div></div><div></div><div></div>
         <div></div><div></div><div></div>
         <div></div><div></div><div></div>
         <div></div><div></div><div></div>
         <div></div><div></div><div></div>
     </div>
  
  </div>
</div>

When i click #grid-holder > div i have alert message, but how to prevent this action when i drag #object1 element by holding onto children's element?