title: Prevent child's onclick after mouseup on parent?
body: <p>I have a parent element with <code>mouse up</code> and <code>mouse down</code> events attached on it, and a child element with a <code>click</code> event attached. </p>
  
  <p>Is there any way to prevent the <code>click</code> event from happening in the child, after the <code>mouseup</code> event has been triggered in the parent?</p>
  
  <p>An example, on the <a href="http://jsfiddle.net/6gw4x/28/" rel="nofollow">JSfiddle here</a>, the goal is to make the inner square not turn to green if I click on it.</p>
  
  <p>Ideally I would like to do it without modifying the <code>$('#inner').on('click', function(){})</code>. I already know that I can set a boolean on <code>mouseup</code> and check it on <code>click</code> but i'm trying to find a way to do it without modifying the click event.</p>
  
  <p>Using jquery(or any other library) is option and I don't really have any restrictions other than not modifying the <code>click</code> method.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Thanks @adeneo for the suggestion, that looks promising but it made me realize I missed a big part of the problem. Inside <code>mouseup</code> there will be a conditional check to see if the click should be prevented or not. If I remove the event can I somehow add it back after the click has been avoided? In a <code>setTimeout</code> for example. I'm not sure how(or if it's possible) to get the reference to the removed <code>click</code> function and then re-add the handler. </p>
  
  <p>Hopefully this <a href="http://jsfiddle.net/6gw4x/31/" rel="nofollow">new fiddle here</a> helps me to explain it a little bit better! </p>