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.
Respuestas:
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.
.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.
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
});
});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í.
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>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>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.
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.
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).
Prueba esto:
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});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();
}
}); $(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 ...
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();
}
});$('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/
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ú:
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>Solo 2 pequeñas mejoras a las sugerencias anteriores:
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();
});$(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();
}
});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();
});