javascript - Detect mouse dblckick outside of nested element? -

what i'm trying here configure jquery have 2 boxes. first box allows me hide first box , open new 1 when clicked. new (second) box removed when clicking body outside of element.

i've been playing differnt things including exit/enter events, can't seem find simple , straightforward way effect.

i've set jsfiddle demonstrates i'm trying do.

http://jsfiddle.net/wdapu/2/

i think need add

event.stoppropagation(); 

to event handler bound #opener. prevents event bubbling , raising event handler in #body.

see updated version: http://jsfiddle.net/wdapu/3/

reference: event.stoppropagation

now, still hide new box if double click inside new box. prevent have bind event handler , prevent event bubbling too. can done shortcut:

$('#content').dblclick(false); 

(see here: http://jsfiddle.net/wdapu/6/)

---

if creating boxes dynamically, have @ .delegate() , event.stopimmediatepropagation().