1. Inicio
  2. Pregunta y respuesta
  3. jQuery haga clic en elemento evento

jQuery haga clic en elemento evento

2009-09-14 38 views
44

Tengo un div flotante que se muestra, y quiero que se oculte cuando el usuario hace clic en el div. Esto sería similar a la devolución de llamada de la función .hover() al desplazarse fuera de un elemento. Solo quiero hacer esto para hacer clic.jQuery haga clic en elemento evento

Intenté simplemente establecer un evento de clic para el cuerpo, lo que ocultaría el div, pero eso dio resultados inesperados.

¿Alguien tiene ideas sobre cómo podría hacer esto fácilmente?

Fuente

2009-09-14 Nic Hubbard

+5

Por favor, elabore en "que dio resultados inesperados". –

Respuesta

19

Otro, posiblemente más simple, la opción sería agregar un div transparente entre el DIV flotante y el resto de la página.

Un simple evento de clic en el DIV transparente podría manejar el ocultamiento, y evitaría los problemas que se encuentran con el evento click.

Fuente

2009-09-14 20:40:00 PhillFox

+0

Excelente idea. He hecho algo como esto en el pasado para una situación diferente. Gracias por traer esto a mi atención. –

+0

Su bienvenida, y gracias por aceptar la respuesta. Casi no publiqué porque realmente no sé lo que estás diseñando y pensé que la opción podría no funcionar, pero a veces la perspectiva de un forastero es la mejor manera de resolver un problema. ¡Buena suerte! – PhillFox

+4

¿Cómo es esto más simple que la respuesta de DavidB? – JPot

86

Si desea borrar el div cuando se hace clic en otra parte de la página, se puede hacer algo como:

$('body').click(function(event) { 
    if (!$(event.target).closest('#myDiv').length) { 
     $('#myDiv').hide(); 
    }; 
});

Fuente

2009-09-14 20:25:47

+0

impresionante, gracias – HappyDeveloper

+0

Este es el único que funciona para mí para mi situación. ¡Gracias! – Jurgen

+1

¿Para qué sirve '.length'? – pruett

-2

Usted va a necesitar para controlar el evento mouseDown para toda la página, pero Tendrás que tomar nota cuando el usuario haga clic dentro de tu div flotante.

que sugeriría la adición de un evento de vuelo estacionario a su div flotaba por lo que cuando el usuario se cierne sobre él, mouseDown se tiene en cuenta, pero cuando no se movía sobre mouseDown habría cerrarla

Fuente

2009-09-14 20:27:28 idrumgood

10

Seguramente está buscando el evento blur?

Fuente

2009-09-14 20:43:19 annakata

+1

* suspiro * ¿alguien quiere explicar el downvote en absoluto? (¿O todos estos votos abajo?) – annakata

+0

El evento 'blur' solo funciona para los elementos del formulario, el asker probablemente estaba buscando algo similar para los elementos que no son de formulario. –

+2

bueno eso no es verdad * en absoluto * - http://www.quirksmode.org/dom/events/blurfocus.html – annakata

0

Aquí es un enfoque orientado a eventos de pleno derecho

  • eventos personalizados procesan la "invocación" y "despedir" de la capa para no pisar los dedos de los pies de otros eventos basados ​​clic
  • documento .body escucha para un evento de despedir sólo cuando la capa en cuestión es realmente visible
    • código

Zee:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 

$(function() 
{ 
    var $layer = $('#layer'); 
    var $body = $('html'); 

    $layer 
    .bind('summon', function(e) 
    { 
     $layer.show(); 
     $body.bind('click', dismissLayer); 
    }) 
    .bind('dismiss', function(e) 
    { 
     $layer.hide(); 
     $body.unbind('click', dismissLayer); 
    }) 
    .click(function(e) 
    { 
     e.stopPropagation(); 
    }) 
    .trigger('dismiss') 
    ; 

    function dismissLayer(e) 
    { 
    $layer.trigger('dismiss'); 
    } 

    // This is optional - this just triggers the div to 'visible' 
    $('#control').click(function(e) 
    { 
    var $layer = $('#layer:hidden'); 
    if ($layer.length) 
    { 
     $layer.trigger('summon'); 
     e.stopPropagation(); 
    } 
    }); 
}); 

</script> 

<style type="text/css"> 
#layer { 
    position: absolute; 
    left: 100px; 
    top: 20px; 
    background-color: red; 
    padding: 10px; 
    color: white; 
} 
#control { 
    cursor: pointer; 
} 
</style> 

</head> 
<body> 

<div id="layer">test</div> 
<span id="control">Show div</span> 

</body> 
</html>

Es un montón de código que conozco, pero aquí solo para mostrar un enfoque diferente.

Fuente

2009-09-14 21:25:07

11

Si está usando jQuery, se puede usar un selector como:

$("*:not(#myDiv)").live("click", function(){ 
    $("#myDiv").hide(); 
});

Fuente

2010-04-06 21:10:48 Kelly

+2

Lo sentimos, debería ser el siguiente: $ ("*: not (#myTrigger)"). Live ("click", function() { $ ("# myDiv"). Hide (); }); – Kelly

+0

¿Quién votó eso y por qué? Eso funcionó perfectamente para mí. ¡Gracias! –

+1

¿No adjunta un oyente de clic a * cada elemento * que no es #myDiv? Parece una carga de memoria del navegador mayor que simplemente $ ('cuerpo'). –

0

El uso de un controlador de eventos en el documento funciona bien para mí:

 
function popUp(element) 
{ 
    element.onmousedown = function (event) { event.stopPropagation(); }; 
    document.onmousedown = function() { popDown(element); }; 

    document.body.appendChild(element); 
} 

function popDown(element) 
{ 
    document.body.removeChild(element); 

    document.onmousedown = null; 
}

Fuente

2010-06-09 05:39:38 Gali

1

Esta es una función para manejar el evento de hacer clic, lo alimentaré con el selector de la ventana emergente y el elemento jquery. Probablemente sirva mejor como un plugin jquery, pero esto es bastante simple.

clickOut = function(selector, element) { 
var hide = function(event) { 
    // Hide search options if clicked out 
    if (!$(event.originalEvent.target).parents(selector).size()) 
    $(element).hide(); 
    else 
    $(document).one("click",hide); 
}; 

$(document).one("click", hide); 
};

Así que si usted tiene un elemento emergente como <div class='popup'>test</div> puedes usar mi función como clickOut("div.popup", $("div.popup"));

Fuente

2010-10-05 16:01:14 user467043

9

La mejor manera de hacer esto es: -

  
$(document).bind('click', function(e) { 

var $clicked = $(e.target); 

    if (!$clicked.parents().hasClass("divtohide")) { 
     $(".divtohide").hide(); 
    } 

});

Fuente

2010-11-03 13:18:37

+1

Esta es una bonita y elegante :) si estás usando clases que es – Prof83

0

he encontrado la solución en un foro ... pero no puedo encontrarlo de nuevo para acreditar al autor original. Aquí está la versión (modificada que vive en mi código).

$(document).bind('mousedown.yourstuff', function(e) { 
      var clicked=$(e.target); // get the element clicked     
      if(clicked.is('#yourstuff') 
       || clicked.parents().is('#yourstuff')) { 
       // click safe! 
      } else { 
       // outside click 
       closeIt(); 
      } 
     }); 

function closeIt() { 
     $(document).unbind('mousedown.emailSignin'); 
     //... 
}

también tienen fijaciones keyup ESC y un ancla 'cerca' html no se representa más arriba.

Fuente

2011-01-08 06:03:41 Yann

0

Si no desea ocultar el elemento que va a mostrar haciendo clic en sí:

var div_active, the_div; 

the_div = $("#the-div"); 
div_active = false; 

$("#show-the-div-button").click(function() { 
    if (div_active) { 
    the_div.fadeOut(function(){ 
     div_active = false; 
    }); 
    } else { 
    the_div.fadeIn(function(){ 
     div_active = true; 
    }); 
    } 
}); 

$("body").click(function() { 
    if div_active { 
    the_div.fadeOut(); 
    div_active = false; 
    } 
}); 

the_div.click(function() { 
    return false; 
});

Fuente

2011-05-16 05:00:28

1

ejemplo, hace clic en un elemento de enlace para mostrar div menú, sólo tiene que ates función de toma de elemento para ocultar div vincular menú

$('a#displaymenu').click(function(){ 
    $("#divName").toggle(); 
}).blur(function() {$("#divName").hide()})

Fuente

2011-10-17 10:34:40

2

Esto funcionó para mí,

var mouseOver = false; 
$("#divToHide").mouseover(function(){mouseOver=true;}); 
$("#divToHide").mouseout(function(){mouseOver=false;}); 
$("body").click(function(){ 
     if(mouseOver == false) { 
      $("#divToHide").hide(); 
     } 
});

Fuente

2012-08-01 13:22:55 cupa

1 
 $('body').click(function (event) {   
if ($("#divID").is(':visible')) { 
      $('#divID').slideUp(); 
     } 
});

Esto se puede usar para verificar si el div es visible, si es visible, entonces deslizará el objeto hacia arriba.

Fuente

2014-08-26 11:28:17 TGarrett

Cuestiones relacionadas

 Cuestiones relacionadas