Ocultar DIV al hacer clic fuera

[iBioHacker]

El objetivo es IMITAR el comportamiento del menu construido con un iFrame que esta en Outlook.com, en ese menu hay separadores entre los enlaces y algunos cuadros para seleccionar el color de la interfaz, el menu SIEMPRE esta activo sin importar las acciones que se realizen dentro de el , HASTA que el usuario haga clic fuera .

Las soluciones que he probado no funcionan como el menu de Outlook.com, estos son los inconvenientes:

- En una solución me cierra el menu antes de que pueda hacer clic a un enlace

- En otra si despliego el menu, me cambio de ventana del navegador y regreso al menu este se cierra. No debe hacer eso

- En otras soluciones el menu se comporta como cualquier otro: Desplegar menu > Ejecutar accion > Cerrar menu. Si el usuario cambiara colores de la interfaz tendria q dar varios clics siempre para cambiar el color (por ejemplo).

- Probando mas soluciones esta el Hover sobre el menu y mostar la capa. En lo personal me molesta ese efecto ya que no siempre kiero ver que tiene cada menu y si paso el mouse inocentemente por un enlace siempre me esta molestando el despliegue del menu activo.

- En otra mas esta ocultar menu con un setTimeout() luego de ejecutar acciones, el usuario al ver que el menu no se oculta inmediatamente al hacer clic; tiende a dar varios clics, hasta que finalmente se oculta y cree hay un error en mi proyecto que retraza los clics (aun dejandolo con 1000 milisegundos llegan a notar el retrazo y les molesta)

- Una solución mas crea el efecto "Burbujeo" (ocultando/mostrando capa) es mas obvio en IE y hay que colocar un parche con e.PreventDefault(); o return false; pero aun asi no funciona como tal.

- Otra solucion propone colocar una capa "overlay" para cubrir la interfaz y al hacer clic sobre esa capa cerrara el menu. MAL. Las aplicaciones que hacen uso de menus con clic fuera de el, si permiten ejecutar otra accion en cualquier lugar de la interfaz y posteriormente se oculta el menu que estaba activo. En este ejemplo no ejecuta nada MAS que ocultar el menu, hay q dar un nuevo clic para ejecutar otra accion en la interfaz.

En fin he leido mucho estos ultimos 2 meses y ya desarrolle una solucion que se basa en una variable almacenada en el DOM usando data() de jQuery de esa forma la checkeo y usando el evento click de body puedo determinar si se ocultara o no la capa. De antemano muchas gracias gebremswar y PHPcool

$(document.body).click(function(){ var v=$(document).data(variable); if(v=='0'){ capa.slideUp(200); } });