How can I disable a click event on resize when using jQueryUI's resizable?

I am building an interface with jQuery and jQueryUI and I something that looks like this

<div id="sidebar">
  <div id="handle">
  </div>
</div>

I then have this javascript running on document.ready

$("#sidebar").resizable({
  handles: { e: '#handle' }
});

$("#sidebar").bind('resizestart', function() { console.log("Resize started") });

$("#sidebar").bind('resizestop', function() { console.log("Resize stopped") });

$("#handle").bind('click', function() { console.log("Hide Sidebar") });

My problem is that the click event on #handle is being fired after the resizing events. I know I need to somehow disable the click event for the duration of the drag, but even unbinding click on dragstart and rebinding it on dragstop doesn't stop the click event from firing.

ps. Please ignore any small syntax errors, I have been using coffeescript for too long, everythin开发者_StackOverflow中文版g does actually work, just not how I want it to