J'aimerais savoir si c'est la bonne façon de masquer des éléments visibles lorsqu'on clique n'importe où sur la page.
$(document).click(function (event) {
$('#myDIV:visible').hide();
});
L'élément (div, span, etc.) ne peut pas disparaître lorsqu'un événement click survient aux limites de l'élément.
Si j'ai bien compris, vous souhaitez masquer une div lorsque vous cliquez n'importe où sauf la div, et si vous cliquez tout en survolant la div, il ne devrait PAS se fermer. tu peux le faire:
$(document).click(function() {
alert("me");
});
$(".myDiv").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});
Cela lie le clic à la page entière, mais si vous cliquez sur la div en question, l'événement click sera annulé.
Essaye ça
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
J'utilise le nom de la classe au lieu de l'ID , car dans asp.net, vous devez vous soucier des choses supplémentaires que .net attache à l'ID.
EDIT- Depuis que vous avez ajouté un autre morceau, cela fonctionnerait comme ceci:
$('.myDiv').click(function() { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$('.openDiv').click(function() {
$('.myDiv').show();
});
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
Comme de jQuery 1.7 il y a une nouvelle façon de gérer les événements. Je pensais répondre ici juste pour montrer comment je pourrais le faire de cette "nouvelle" façon. Si vous ne l'avez pas, je vous recommande de lire le jQuery docs pour le "" la méthode.
var handler = function(event){
// if the target is a descendent of container do nothing
if($(event.target).is(".container, .container *")) return;
// remove event handler from document
$(document).off("click", handler);
// dostuff
}
$(document).on("click", handler);
Ici nous sommes en train d'abuser de sélecteurs de jQuery et le bouillonnement des événements. Notez que je m'assurer de nettoyer le gestionnaire d'événement par la suite. Vous pouvez automatiser ce comportement avec $('.container').one (voir: docs), mais parce que nous avons besoin de faire des instructions conditionnelles dans le gestionnaire n'est pas applicable ici.
Merci Thomas. Je suis nouveau chez JS et je cherche une solution à mon problème. Le vôtre a aidé.
J'ai utilisé jQuery pour créer une boîte de connexion qui glisse vers le bas. Pour une meilleure expérience utilisateur, je souhaitais que la boîte disparaisse lorsqu'un utilisateur clique quelque part que la boîte. Je suis un peu gêné d'utiliser environ quatre heures pour régler ce problème. Mais bon, je suis nouveau à JS.
Peut-être que mon code peut aider quelqu'un:
<body>
<button class="login">Logg inn</button>
<script type="text/javascript">
$("button.login").click(function () {
if ($("div#box:first").is(":hidden")) {
$("div#box").slideDown("slow");}
else {
$("div#box").slideUp("slow");
}
});
</script>
<div id="box">Lots of login content</div>
<script type="text/javascript">
var box = $('#box');
var login = $('.login');
login.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
