Je voudrais masquer un div lorsque l'utilisateur clique n'importe où sur la page en dehors de ce div. Comment puis-je faire cela en utilisant javascript brut ou jQuery?Événement sur un clic partout sur la page en dehors du div spécifique
Joindre un événement de clic au document pour cacher la div:
$(document).click(function(e) {
$('#somediv').hide();
});
Joindre un événement click la div pour arrêter clique dessus de se propager au document:
$('#somediv').click(function(e) {
e.stopPropagation();
});
Merci beaucoup! Cela a fonctionné comme je le voulais. – sumek
AFAIK, avec jQuery dans le deuxième gestionnaire d'événements vous avez seulement besoin de "return false"; arrêter la propagation. http://docs.jquery.com/Events/click (près du bas de la page) – scunliffe
@scunliffe - C'est vrai, ils font fondamentalement la même chose. La bonne chose à propos de stopProp est qu'il ne doit pas être la dernière ligne, donc vous pouvez toujours le mettre sur la première ligne pour la lisibilité, par exemple. –
idée d'abord, javascript brut (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>
testé avec IE6 et FireFox3.1, il ne fonctionne pas comme annoncé.
Il vous On dirait que vous voulez un dialogue modal. Ce plugin jQuery http://code.google.com/p/simplemodal/ a l'air d'avoir du potentiel.
Si le div a le focus, vous pouvez attacher à l'événement onblur.
Je pense que le jQuery focusout() - Event résoudra votre problème. –