Javascript mousedown and mouseup event conflict

I am creating a simple drawing website. What I would like to achieve is that my menubar should become unclickable, while my mouse is down (while drawing). This works all right, but upon mouseup, nothing happens. I have been Googling for a pretty long time, but didn't find any solutions. Any ideas?

var mousedDownFired = false;
  $("body").mousedown(function(event){
      mousedDownFired =true;
       document.body.style.pointerEvents = 'none';
    
  });

  $("body").mouseup(function(event){
        
     if(mousedDownFired)
      {
         mousedDownFired = false;
         return;
      }
      document.body.style.pointerEvents = 'auto';
 });

When you set document.body.style.pointerEvents = 'none'; you prevent mouseUp event from firing.

If you want to make your menubar unclickable just set it's style.pointerEvents to 'none', not whole document body.