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

ocultar div html5

Question

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.

Answer 1

¿No funcionaría algo como esto?

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

o

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

Answer 2

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

Answer 3

Actualizada la solución para:

• usa mouseenter y mouseleave en su lugar
• de hover usar enlace de eventos en vivo

var mouseOverActiveElement = false;

$(''.active'').live(''mouseenter'', function(){
mouseOverActiveElement = true;
}).live(''mouseleave'', function(){
mouseOverActiveElement = false;
});
$("html").click(function(){
if (!mouseOverActiveElement) {
console.log(''clicked outside active element'');
}
});

Answer 4

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.

Answer 5

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'';
}
}
})

Answer 6

Aquí hay un jsfiddle que encontré en otro hilo, también funciona con la tecla esc: http://jsfiddle.net/S5ftb/404

 var button = $(''#open'')[0]
var el = $(''#test'')[0]
$(button).on(''click'', function(e) {
$(el).show()
e.stopPropagation()
})
$(document).on(''click'', function(e) {
if ($(e.target).closest(el).length === 0) {
$(el).hide()
}
})
$(document).on(''keydown'', function(e) {
if (e.keyCode === 27) {
$(el).hide()
}
})

Answer 7

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!

Answer 8

Devuelve false si haces clic en .form_wrapper:

$(''body'').click(function() {
$(''.form_wrapper'').click(function(){
return false
});
$(''.form_wrapper'').hide();
});
//$(''.form_wrapper'').click(function(event){
// event.stopPropagation();
//});

Answer 9

En lugar de escuchar cada clic en el DOM para ocultar un elemento específico, puede establecer tabindex en el <div> y escuchar los eventos de focusout .

La configuración de tabindex se asegurará de que el evento de blur se dispare en <div> (normalmente no lo haría).

Entonces tu HTML se vería así:

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

Y tu JS:

$(''.form_wrapper'').on(''focusout'', function(event){
$(''.form_wrapper'').hide();
});

Answer 10

Es posible que desee comprobar el destino del evento de clic que se activa para el cuerpo en lugar de confiar en stopPropagation.

Algo como:

$("body").click
(
function(e)
{
if(e.target.className !== "form_wrapper")
{
$(".form_wrapper").hide();
}
}
);

Además, es posible que el elemento del cuerpo no incluya todo el espacio visual que se muestra en el navegador. Si observa que sus clics no se están registrando, es posible que deba agregar el controlador de clics para el elemento HTML.

Answer 11

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

Answer 12

Incluso más delgado:

$("html").click(function(){
$(".wrapper:visible").hide();
});

Answer 13

Lo hice así:

var close = true;
$(function () {
$(''body'').click (function(){
if(close){
div.hide();
}
close = true;
})
alleswasdenlayeronclicknichtschliessensoll.click( function () {
close = false;
});
});

Answer 14

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'');

Answer 15

Quería que me gustara la sugerencia más votada, pero no funcionó para mí.

Este método es casi el mismo pero funcionó para mí. http://www.codesynthesis.co.uk/code-snippets/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it

Answer 16

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

Answer 17

Si tiene problemas con iOS, mouseup no funciona en un dispositivo Apple.

¿Funciona mousedown / mouseup en jquery para el iPad?

yo uso esto:

$(document).bind(''touchend'', function(e) {
var container = $("YOURCONTAINER");
if (container.has(e.target).length === 0)
{
container.hide();
}
});

Answer 18

Tantas respuestas, debe ser un derecho de paso para haber agregado una ... No vi una respuesta actual (jQuery 3.1.1), así que:

$(function() {
$(''body'').on(''mouseup'', function() {
$(''#your-selector'').hide();
});
});

Answer 19

Tenía el mismo problema, se le ocurrió esta solución fácil. Incluso funciona recursivo:

$(document).mouseup(function(e)
{
var container = $("YOUR CONTAINER SELECTOR");
// if the target of the click isn''t the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});

Answer 20

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

Answer 21

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

Answer 22

Demostración en vivo con funcionalidad ESC

Funciona tanto en escritorio como móvil

var notH = 1,
$pop = $(''.form_wrapper'').hover(function(){ notH^=1; });
$(document).on(''mousedown keydown'', function( e ){
if(notH||e.which==27) $pop.hide();
});

_{Si en algún caso necesita asegurarse de que su elemento sea realmente visible cuando haga clic en el documento: if($pop.is('':visible'') && (notH||e.which==27)) $pop.hide();}

Answer 23

Demo en vivo

El área de verificación de clics no está en el elemento objetivo o en su hijo

$(document).click(function (e) {
if ($(e.target).parents(".dropdown").length === 0) {
$(".dropdown").hide();
}
});

ACTUALIZAR:

La mejor solución es jQuery stop propagation.

Demo en vivo

$(".button").click(function(e){
$(".dropdown").show();
e.stopPropagation();
});
$(".dropdown").click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$(".dropdown").hide();
});

Answer 24

$(document).ready(function() {
$(''.modal-container'').on(''click'', function(e) {
if(e.target == $(this)[0]) {
$(this).removeClass(''active''); // or hide()
}
});
});

.modal-container {
display: none;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 999;
}
.modal-container.active {
display: flex;
}
.modal {
width: 50%;
height: auto;
margin: 20px;
padding: 20px;
background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-container active">
<div class="modal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac varius purus. Ut consectetur viverra nibh nec maximus. Nam luctus ligula quis arcu accumsan euismod. Pellentesque imperdiet volutpat mi et cursus. Sed consectetur sed tellus ut finibus. Suspendisse porttitor laoreet lobortis. Nam ut blandit metus, ut interdum purus.</p>
</div>
</div>

Answer 25

var exclude_div = $("#ExcludedDiv");;
$(document).click(function(e){
if( !exclude_div.is( e.target ) ) // if target div is not the one you want to exclude then add the class hidden
$(".myDiv1").addClass("hidden");
}); 

FIDDLE

Answer 26

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

Answer 27

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

Answer 28

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

Answer 29

dojo.query(document.body).connect(''mouseup'',function (e)
{
var obj = dojo.position(dojo.query(''div#divselector'')[0]);
if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){
MyDive.Hide(id);
}
});

Answer 30

var n = 0;
$("#container").mouseenter(function() {
n = 0;
}).mouseleave(function() {
n = 1;
});
$("html").click(function(){
if (n == 1) {
alert("clickoutside");
}
});