html Utilice jQuery para ocultar un DIV cuando el usuario haga clic fuera de él.





15 Answers

Será mejor que vayas con algo como esto:

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.form_wrapper').hide();
    });
});
jquery html hide styling

Estoy usando este código:

$('body').click(function() {
   $('.form_wrapper').hide();
});

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

Y este HTML:

<div class="form_wrapper">
   <a class="agree" href="javascript:;">I Agree</a>
   <a class="disagree" href="javascript:;">Disagree</a>
</div>

El problema es que tengo enlaces dentro del DIV y cuando ya no funcionan cuando se hace clic.




Este código detecta cualquier evento de clic en la página y luego oculta el elemento #CONTAINER si y solo si el elemento que se hizo clic no era el elemento #CONTAINER ni uno de sus descendientes.

$(document).on('click', function (e) {
    if ($(e.target).closest("#CONTAINER").length === 0) {
        $("#CONTAINER").hide();
    }
});



$(document).click(function(event) {
    if ( !$(event.target).hasClass('form_wrapper')) {
         $(".form_wrapper").hide();
    }
});



Una solución sin jQuery para la respuesta más popular :

document.addEventListener('mouseup', function (e) {
    var container = document.getElementById('your container ID');

    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
}.bind(this));

MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains




¿No funcionaría algo como esto?

$("body *").not(".form_wrapper").click(function() {

});

o

$("body *:not(.form_wrapper)").click(function() {

});



Y para dispositivos táctiles como IPAD e IPHONE podemos usar el siguiente código

$(document).on('touchstart', function (event) {
var container = $("YOUR CONTAINER SELECTOR");

if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});



Construido a partir de la increíble respuesta de prc322.

function hideContainerOnMouseClickOut(selector, callback) {
  var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
  $(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
    var container = $(selector);

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
      container.hide();
      $(document).off("mouseup.clickOFF touchend.clickOFF");
      if (callback) callback.apply(this, args);
    }
  });
}

Esto añade un par de cosas ...

  1. Colocado dentro de una función con una devolución de llamada con argumentos "ilimitados"
  2. Se agregó una llamada a .quem () de jquery junto con un espacio de nombres de eventos para desvincular el evento del documento una vez que se haya ejecutado.
  3. Incluye toque para funcionalidad móvil

¡Espero que esto ayude a alguien!




var n = 0;
$("#container").mouseenter(function() {
n = 0;

}).mouseleave(function() {
n = 1;
});

$("html").click(function(){ 
if (n == 1) {
alert("clickoutside");
}
});



 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

p es el nombre del elemento. Donde uno puede pasar el id o la clase o el nombre del elemento también.




Adjunte un evento de clic a los elementos de nivel superior fuera de la envoltura de formulario, por ejemplo:

$('#header, #content, #footer').click(function(){
    $('.form_wrapper').hide();
});

Esto también funcionará en dispositivos táctiles, solo asegúrate de no incluir un padre de .form_wrapper en tu lista de selectores.




Lo hice así:

var close = true;

$(function () {

    $('body').click (function(){

        if(close){
            div.hide();
        }
        close = true;
    })


alleswasdenlayeronclicknichtschliessensoll.click( function () {   
        close = false;
    });

});



<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>



(Solo añadiendo a la respuesta de prc322.)

En mi caso, estoy usando este código para ocultar un menú de navegación que aparece cuando el usuario hace clic en la pestaña correspondiente. Descubrí que era útil agregar una condición adicional, que el objetivo del clic fuera del contenedor no es un enlace.

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!$("a").is(e.target) // if the target of the click isn't a link ...
        && !container.is(e.target) // ... or the container ...
        && container.has(e.target).length === 0) // ... or a descendant of the container
    {
        container.hide();
    }
});

Esto se debe a que algunos de los enlaces en mi sitio agregan nuevo contenido a la página. Si este nuevo contenido se agrega al mismo tiempo que desaparece el menú de navegación, puede ser desorientador para el usuario.




Al usar este código puedes ocultar tantos elementos como quieras

var boxArray = ["first element's id","second element's id","nth element's id"];
   window.addEventListener('mouseup', function(event){
   for(var i=0; i < boxArray.length; i++){
    var box = document.getElementById(boxArray[i]);
    if(event.target != box && event.target.parentNode != box){
        box.style.display = 'none';
    }
   }
})



Lo que puede hacer es vincular un evento de clic al documento que ocultará el menú desplegable si se hace clic en algo fuera del menú desplegable, pero no lo ocultará si se hace clic en algo dentro del menú desplegable, por lo que su evento "show" (o slidedown o lo que sea) muestra el menú desplegable)

    $('.form_wrapper').show(function(){

        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass("class-of-dropdown-container")) {
                 $('.form_wrapper').hide();
            }
        });

    });

Luego, al esconderlo, desenlazar el evento click

$(document).unbind('click');



Related