¿Cómo oculto un elemento en un evento de clic en cualquier lugar fuera del elemento?

121

Me gustaría saber si esta es la forma correcta de ocultar elementos visibles cuando se hace clic en cualquier parte de la página.

$(document).click(function (event) {            
    $('#myDIV:visible').hide();
});

El elemento (div, span, etc.) no debería desaparecer cuando se produce un evento de clic dentro de los límites del elemento.

jquery events event-bubbling Franek
fuente

204

Si lo entiendo, desea ocultar un div cuando hace clic en cualquier lugar menos en el div, y si hace clic mientras está sobre el div, entonces NO debería cerrarse. Puedes hacer eso con este código:

$(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
});

Esto vincula el clic a toda la página, pero si hace clic en el div en cuestión, cancelará el evento de clic.

Jeremy B.
fuente

1

Esto funciona bien ... pero cuando hago clic sobre el botón que llama a la ventana emergente, aparece la ventana emergente y luego desaparece inmediatamente. Qué hacer para eso, ya que el documento está tomando dos acciones a la vez. para llamar a la ventana emergente al hacer clic en el cuerpo y para desvanecer la ventana emergente en el clic del cuerpo

Veer Shrivastav

@VeerShrivastav pasa lo mismo aquí. e.stopPropagation (); detendrá todos los controladores de

clics

Esto NO funcionará en Safari si tiene otros elementos dentro del .myDivelemento. Por ejemplo, si tiene un menú desplegable de selección dentro .myDiv. Cuando haga clic en seleccionar, pensará que está haciendo clic fuera del cuadro.

CodeGodie

24

Prueba esto

 $('.myDiv').click(function(e) { //button click class name is myDiv
  e.stopPropagation();
 })

 $(function(){
  $(document).click(function(){  
  $('.myDiv').hide(); //hide the button

  });
});

Utilizo el nombre de la clase en lugar de la identificación , porque en asp.net tienes que preocuparte por las cosas adicionales que .net adjunta a la identificación

EDITAR- Dado que agregó otra pieza, funcionaría así:

 $('.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

  });
});

TStamper
fuente

22

A partir de jQuery 1.7 hay una nueva forma de manejar eventos. Pensé que respondería aquí solo para demostrar cómo podría hacer esto de la "nueva" forma. Si no lo ha hecho, le recomiendo que lea los documentos de jQuery para el método "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);

Aquí estamos abusando de los selectores de jQuery y el burbujeo de eventos. Tenga en cuenta que me aseguro de limpiar el controlador de eventos después. Puede automatizar este comportamiento con $('.container').one( ver: documentos ) pero porque necesitamos hacer condicionales dentro del controlador que no se aplican aquí.

Ben Taylor
fuente

13

Este siguiente ejemplo de código parece funcionar mejor para mí. Si bien puede usar 'return false' que detiene todo el manejo de ese evento para el div o cualquiera de sus hijos. Si desea tener controles en el div emergente (un formulario de inicio de sesión emergente, por ejemplo), debe usar 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>

fuente

6

Gracias, Thomas. Soy nuevo en JS y he estado buscando locamente una solución a mi problema. El tuyo ayudó.

He usado jquery para hacer un cuadro de inicio de sesión que se desliza hacia abajo. Para una mejor experiencia de usuario, decidí hacer desaparecer el cuadro cuando el usuario hace clic en algún lugar que no sea el cuadro. Me da un poco de vergüenza usar unas cuatro horas para arreglar esto. Pero bueno, soy nuevo en JS.

Quizás mi código pueda ayudar a alguien:

<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>

Tommy
fuente

5

Lo que también puedes hacer es:

$(document).click(function (e)
{

  var container = $("div");

   if (!container.is(e.target) && container.has(e.target).length === 0)
  {
 container.fadeOut('slow');

   }

});

Si su objetivo no es un div, oculte el div comprobando que su longitud sea igual a cero.

Sandeep Pal
fuente

5

Hice lo siguiente. Pensé en compartir para que otra persona también pudiera beneficiarse.

$("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"});
        }
    });
});

Avísame si puedo ayudar a alguien en esto.

foxybagga
fuente

Excelente código y no se ejecuta si div#newButtonDivno se hace clic. Le recomendaría que elimine el segundo .click()en la línea 4 (si hace esto, recuerde eliminar las llaves de cierre, el paréntesis y el punto y coma - línea 9).

aullah

4

Prueba esto:

 $(document).mouseup(function (e) {
    var div = $("#yourdivid");
    if (!div.is(e.target) && div.has(e.target).length === 0) 
    {
       div.hide();
     }
    });

Nalan Madheswaran
fuente

3

Otra forma de ocultar el div contenedor cuando ocurre un clic en un elemento no secundario;

$(document).on('click', function(e) {
    if(!$.contains($('.yourContainer').get(0), e.target)) {
        $('.yourContainer').hide();
    }
});

Renato Gama
fuente

3

  $(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();
        }
    });

Aquí #suggest_input in es el nombre del cuadro de texto y .suggest_container es el nombre de la clase ul y .suggest_div es el elemento div principal para mi sugerencia automática.

este código es para ocultar los elementos div haciendo clic en cualquier parte de la pantalla. Antes de hacer todo, comprenda el código y cópielo ...

Shaikh Arbaaz
fuente

2

Prueba esto, funciona perfecto para mí.

$(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();
    }
});

Hassan Sardar
fuente

2

$('html').click(function() {
//Hide the menus if it is visible
});

$('#menu_container').click(function(event){
    event.stopPropagation();
});

pero también debes tener en cuenta estas cosas. http://css-tricks.com/dangers-stopping-event-propagation/

Muhammad Tahir
fuente

2

Aquí hay una solución CSS / JS pequeña en funcionamiento basada en la respuesta de Sandeep Pal:

$(document).click(function (e)
{
  if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
  {
   $("#menu-toggle3").prop('checked', false);
  }
});

Pruébelo haciendo clic en la casilla de verificación y luego fuera del menú:

https://jsfiddle.net/qo90txr8/

Bjoerg
fuente

1

Esto no funciona, oculta el .myDIV cuando hace clic dentro de él.

$('.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>

Franek
fuente

por lo que desea que el div se muestre para mostrar cuándo se coloca el enlace, luego saque ese e.stopPropa .. de allí y siga mi opción

TStamper

1

Solo 2 pequeñas mejoras a las sugerencias anteriores:

desvincular el documento, haga clic cuando haya terminado

detener la propagación en el evento que desencadenó esto, asumiendo que es 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();
});

commonpike
fuente

1

$(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>

Expandir fragmento

Ehsan KHAN
fuente

0

$( "element" ).focusout(function() {
    //your code on element
})

Jafar Choupan
fuente

5

Si bien este código puede resolver la pregunta, incluir una explicación realmente ayuda a mejorar la calidad de su publicación.

Shree

-1

$(document).mouseup(function (e)
{
    var mydiv = $('div#mydiv');
    if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
       search.slideUp();
    }
});

mohammad gitipasand
fuente

-1

Solución simple: oculte un elemento en un evento de clic en cualquier lugar fuera de algún elemento específico.

$(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();
            });

Super modelo
fuente

¿Cómo oculto un elemento en un evento de clic en cualquier lugar fuera del elemento?

Respuestas: