Me gustaría ocultar un div cuando el usuario hace clic en cualquier parte de la página fuera de ese div. ¿Cómo puedo hacer eso usando raw javascript o jQuery?Evento con un clic en todas partes en la página fuera del div específico
Adjuntar un evento de clic al documento para ocultar el div:
$(document).click(function(e) {
$('#somediv').hide();
});
Adjuntar un evento de clic a la div para detener hace clic en él se propaguen al documento:
$('#somediv').click(function(e) {
e.stopPropagation();
});
¡Muchas gracias! Eso funcionó exactamente como yo quería. – sumek
AFAIK, con jQuery en el segundo controlador de eventos solo necesita "devolver falso"; para detener la propagación http://docs.jquery.com/Events/click (cerca de la parte inferior de la página) – scunliffe
@scunliffe - Es cierto, básicamente hacen lo mismo. Lo bueno de stopProp es que no tiene que ser la última línea, por lo que siempre puedes ponerlo en la primera línea para facilitar la lectura, por ejemplo. –
primera idea, en javascript prima (de this post):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
#mydiv{
background-color: #999999;
height: 100px;
width: 100px;
}
-->
</style>
<script type="text/javascript">
document.onclick=check;
function check(e)
{
var target = (e && e.target) || (event && event.srcElement);
var obj = document.getElementById('mydiv');
if(target!=obj){obj.style.display='none'}
}
</script>
</head>
<body>
<div id="mydiv">my div</div>
</body>
</html>
probado con IE6 y FireFox3.1, funciona como se anuncia.
Seguro parece que quieres un diálogo modal. Este plugin jQuery http://code.google.com/p/simplemodal/ parece que tiene potencial.
Si el div tiene el foco, puede adjuntarlo al evento onblur.
Creo que el jQuery focusout() - Event resolverá su problema. –