I have a parent element with `mouse up` and `mouse down` events attached on it, and a child element with a `click` event attached. 

Is there any way to prevent the `click` event from happening in the child, after the `mouseup` event has been triggered in the parent?

An example, on the [JSfiddle here](http://jsfiddle.net/6gw4x/28/), the goal is to make the inner square not turn to green if I click on it.

Ideally I would like to do it without modifying the `$('#inner').on('click', function(){})`. I already know that I can set a boolean on `mouseup` and check it on `click` but i'm trying to find a way to do it without modifying the click event.

Using jquery(or any other library) is option and I don't really have any restrictions other than not modifying the `click` method.

**EDIT**

Thanks @adeneo for the suggestion, that looks promising but it made me realize I missed a big part of the problem. Inside `mouseup` 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 `setTimeout` for example. I'm not sure how(or if it's possible) to get the reference to the removed `click` function and then re-add the handler. 

Hopefully this [new fiddle here](http://jsfiddle.net/6gw4x/31/) helps me to explain it a little bit better!