Je voudrais savoir si c'est la bonne façon de masquer les éléments visibles lorsque vous cliquez n'importe où sur la page.
$(document).click(function (event) {
$('#myDIV:visible').hide();
});
L'élément (div, span, etc.) ne doit pas disparaître lorsqu'un événement de clic se produit dans les limites de l'élément.
Réponses:
Si je comprends bien, vous voulez masquer un div lorsque vous cliquez ailleurs que sur le div, et si vous cliquez sur le div, alors il ne devrait PAS se fermer. Vous pouvez le faire avec ce code:
$(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 le div en question, cela annulera l'événement de clic.
.myDivélément. Par exemple, si vous avez une liste déroulante de sélection à l'intérieur .myDiv. Lorsque vous cliquez sur sélectionner, il pensera que vous cliquez en dehors de la boîte.
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 trucs supplémentaires que .net attache à l'id
EDIT - Puisque 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
});
});Depuis jQuery 1.7, il existe une nouvelle façon de gérer les événements. J'ai pensé que je répondrais ici juste pour montrer comment je pourrais procéder de la «nouvelle» façon. Si vous ne l'avez pas fait, je vous recommande de lire la documentation jQuery pour la méthode "on" .
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 abusons des sélecteurs de jQuery et du bouillonnement d'événements. Notez que je m'assure de nettoyer le gestionnaire d'événements par la suite. Vous pouvez automatiser ce comportement avec $('.container').one( voir: docs ) mais parce que nous devons faire des conditions dans le gestionnaire qui ne sont pas applicables ici.
Cet exemple de code suivant semble fonctionner le mieux pour moi. Bien que vous puissiez utiliser 'return false' qui arrête toute gestion de cet événement pour le div ou l'un de ses enfants. Si vous voulez avoir des contrôles sur le div pop-up (un formulaire de connexion pop-up par exemple), vous devez utiliser event.stopPropogation ().
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<a id="link" href="#">show box</a>
<div id="box" style="background: #eee; display: none">
<p>a paragraph of text</p>
<input type="file" />
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var box = $('#box');
var link = $('#link');
link.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
</html>Merci, Thomas. Je suis nouveau sur JS et je cherchais fou une solution à mon problème. Votre aide.
J'ai utilisé jquery pour créer une boîte de connexion qui glisse vers le bas. Pour une meilleure expérience utilisateur, j'ai décidé de faire disparaître la boîte lorsque l'utilisateur clique ailleurs que sur la boîte. Je suis un peu gêné d'avoir utilisé environ quatre heures pour résoudre ce problème. Mais bon, je suis nouveau sur 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>Ce que vous pouvez également faire, c'est:
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});Si votre cible n'est pas un div, masquez le div en vérifiant que sa longueur est égale à zéro.
J'ai fait ce qui suit. Pensé à partager pour que quelqu'un d'autre puisse également en bénéficier.
$("div#newButtonDiv").click(function(){
$(this).find("ul.sub-menu").css({"display":"block"});
$(this).click(function(event){
event.stopPropagation();
$("html").click(function(){
$(this).find("ul.sub-menu").css({"display":"none"});
}
});
});Faites-moi savoir si je peux aider quelqu'un à ce sujet.
div#newButtonDivn'est pas cliqué. Je vous recommande de supprimer le deuxième .click()sur la ligne 4 (si vous faites cela, n'oubliez pas de supprimer les accolades fermantes, les parenthèses et le point-virgule - ligne 9).
Essaye ça:
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});Une autre façon de masquer le conteneur div lorsqu'un clic se produit dans un élément not children;
$(document).on('click', function(e) {
if(!$.contains($('.yourContainer').get(0), e.target)) {
$('.yourContainer').hide();
}
}); $(document).on('click', function(e) { // Hides the div by clicking any where in the screen
if ( $(e.target).closest('#suggest_input').length ) {
$(".suggest_div").show();
}else if ( ! $(e.target).closest('.suggest_container').length ) {
$('.suggest_div').hide();
}
});Ici, #suggest_input in est le nom de la zone de texte et .suggest_container est le nom de la classe ul et .suggest_div est l'élément div principal de ma suggestion automatique.
ce code sert à masquer les éléments div en cliquant n'importe où dans l'écran. Avant de tout faire, veuillez comprendre le code et le copier ...
Essayez ceci, cela fonctionne parfaitement pour moi.
$(document).mouseup(function (e)
{
var searchcontainer = $("#search_container");
if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
&& searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
{
searchcontainer.hide();
}
});$('html').click(function() {
//Hide the menus if it is visible
});
$('#menu_container').click(function(event){
event.stopPropagation();
});mais vous devez également garder à l'esprit ces choses. http://css-tricks.com/dangers-stopping-event-propagation/
Voici une solution CSS / small JS fonctionnelle basée sur la réponse de Sandeep Pal:
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});Essayez-le en cliquant sur la case à cocher puis en dehors du menu:
Cela ne fonctionne pas - cela masque le .myDIV lorsque vous cliquez à l'intérieur.
$('.openDiv').click(function(e) {
$('.myDiv').show();
e.stopPropagation();
})
$(document).click(function(){
$('.myDiv').hide();
});
});
<a class="openDiv">DISPLAY DIV</a>
<div class="myDiv">HIDE DIV</div>Juste 2 petites améliorations aux suggestions ci-dessus:
arrêter la propagation sur l'événement qui l'a déclenché, en supposant qu'il s'agit d'un clic
jQuery(thelink).click(function(e){
jQuery(thepop).show();
// bind the hide controls
var jpop=jQuery(thepop);
jQuery(document).bind("click.hidethepop", function() {
jpop.hide();
// unbind the hide controls
jQuery(document).unbind("click.hidethepop");
});
// dont close thepop when you click on thepop
jQuery(thepop).click(function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});$(document).ready(function(){
$("button").click(function(){
$(".div3").toggle(1000);
});
$("body").click(function(event) {
if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
$(".div3").hide(1000);}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>
<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>$( "element" ).focusout(function() {
//your code on element
})$(document).mouseup(function (e)
{
var mydiv = $('div#mydiv');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});Solution simple: masquez un élément sur un événement de clic n'importe où en dehors d'un élément spécifique.
$(document).on('click', function () {
$('.element').hide();
});
//element will not Hide on click some specific control inside document
$('.control-1').on('click', function (e) {
e.stopPropagation();
});