jQuery cliquez sur élément d'événement

J'ai un div flottante qui s'affiche, et je veux qu'il soit masqué lorsque l'utilisateur clique hors de la div. Ce serait semblable à la .hover() la fonction de rappel lorsque vous vous déplacez d'un élément. Seulement, je veux faire ce pour cliquez.

J'ai essayé de simplement définir un événement click pour le corps, ce qui permettrait de cacher la div, mais qui a donné des résultats inattendus.

Quelqu'un a des idées sur comment je pourrais facilement faire cela?

  • Veuillez donner des détails sur "qui a donné des résultats inattendus".
InformationsquelleAutor Nic Hubbard | 2009-09-14
  1. 19

    Un autre, éventuellement plus simple, l'option serait d'ajouter un transparent div entre la DIV flottante et le reste de la page.

    Un simple événement de clic sur le transparent DIV pourrait manipuler le cacher, et elle permettrait d'éviter les problèmes que vous rencontrez avec le clic de l'événement.

    • Grande idée. J'avais fait quelque chose de ce genre dans le passé une situation différente. Merci pour amener celui-ci à mon attention.
    • Votre accueil, et merci pour l'acceptation de la réponse. Je n'ai presque pas de post, parce que je ne sais pas vraiment ce que vous êtes de la conception et de la pensée que l'option peut ne pas fonctionner - mais parfois, un des outsiders de vue est la meilleure façon de résoudre un problème. Bonne chance!
    • Comment est-ce plus simple que DavidB de réponse?
    • Ouai, ce qui semble être la plus difficile de la solution...
    • Je l'ai appelé une solution plus simple parce que Nic a été reporting des résultats inattendus lors de l'utilisation de l'événement de clic sur le corps. Ma solution ne peut pas être élégant, DavidB, je ne suis pas compétent dans JQuery, mais ce serait faire le travail simplement en attente d'un événement de clic sur le caché DIV. Je viens de jeter un autre option pour lui à prendre en considération...
    • Viens de tomber sur cette via Google et j'ai pensé commentaire. L'avantage de PhillFox la solution, c'est que la transparence de la div bloquera tout lien ou clic sur un bouton. Parfois, si il y a un div flottante montré, les utilisateurs suffit de cliquer au hasard hors de la div pour la faire disparaître. La transparence de la div empêche tout sim-clics, tandis que DavidB la solution ne fonctionne pas.
    • PhillFox - Aussi, cette solution signifie que votre script n'est pas exécuté sur CHAQUE événement click. Un mineur efficacité préoccupation peut-être, mais je crois vraiment que c'est plus propre. Avec @CaptSaltyJack raisons ci-dessus (l'arrêt de l'utilisateur accidentellement en cliquant sur un lien), je pense que c'est une meilleure solution.

    InformationsquelleAutor PhillFox
  2. 86

    Si vous voulez effacer la div lorsque vous cliquez ailleurs dans la page, vous pouvez faire quelque chose comme:

    $('body').click(function(event) {
    if (!$(event.target).closest('#myDiv').length) {
        $('#myDiv').hide();
    };
});
    • génial, merci
    • C'est le seul qui fonctionne pour moi dans ma situation. Merci!
    • qu'est-ce que le .length pour?
    • Le .la plus proche méthode retourne un objet jQuery. S'il ne trouve pas quelque chose, il renvoie un vide de l'objet jQuery. .longueur c'est juste une bonne façon de déterminer si quelque chose a été trouvé, parce que 0==false et 1==true, alors qu'un objet jQuery est "vrai", indépendamment de savoir si elle est vide ou pas.
    • C'est génial, j'ai passé 2-3 jours à la recherche d'une réponse. Cela fonctionne! Petite question, comment cela affecte les performances qu'il est appelé à chaque clic.
    • Cela a très bien fonctionné. Ajouté cela pour déclencher. (!$(événement.cible).le plus proche('#myDiv').longueur && !$(événement.cible).le plus proche('#trigger").la longueur )

    InformationsquelleAutor David Bennett
  3. 11

    Si vous utilisez Jquery, vous pouvez utiliser un sélecteur comme:

    $("*:not(#myDiv)").live("click", function(){
    $("#myDiv").hide();
});
    • Désolé, doit être la suivante: $("*:non(#myTrigger)").live("click", function(){ $("#myDiv").hide(); });
    • Qui a voté et pourquoi? Cela a parfaitement fonctionné pour moi. Thx!
    • N'est-ce pas attacher un écouteur de clics pour tous élément qui n'est pas #myDiv ? Semble comme un plus grand navigateur de mémoire fardeau que de simplement $('body').
    InformationsquelleAutor Kelly
  4. 10

    Sûrement, vous êtes à la recherche pour le flou événement?

    • soupir tous ceux qui veulent expliquer le downvote à tous? (ou l'ensemble de ces downvotes?)
    • Le blur événement ne fonctionne que pour les éléments de formulaire, le demandeur était probablement à la recherche de quelque chose de similaire pour les non-éléments de formulaire.
    • eh bien, c'est pas vrai tout - quirksmode.org/dom/events/blurfocus.html
    • C'est tout à fait élégant - merci annakata. $(".modal_div").live("blur", function(){$(this).hide();});
    • Content que cela a été utile à quelqu'un. Le manque de réponses concernant le flou me déroute.
    • +1 intéressant 🙂

    InformationsquelleAutor annakata
  5. 9

    La Meilleure façon de le faire est:-

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

var $cliqué = $(e.cible); 

if (!$cliqué.les parents().hasClass("divtohide")) { 
$(".divtohide").hide(); 
} 

});
    • C'est une bonne élégant 🙂 si vous êtes en utilisant des classes qui est
    InformationsquelleAutor Salman Abbas
  6. 2

    Cela a fonctionné pour moi,

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

    exemple vous cliquez sur un élément de lien pour afficher la div menu , il vous suffit de lier le flou de la fonction de liaison de l'élément à masquer div menu

    $('a#displaymenu').click(function(){
   $("#divName").toggle();
}).blur(function() {$("#divName").hide()})
    InformationsquelleAutor Hoàng Nghĩa
  8. 1

    C'est une fonction pour gérer le clic de l'événement, je le nourrir le sélecteur de la pop-up, et le jquery élément. Probablement mieux servis par un plugin jquery, mais c'est assez 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);
};

    Donc si vous avez un popup élément comme <div class='popup'>test</div> vous pouvez utiliser ma fonction comme clickOut("div.popup", $("div.popup"));

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

    Cela peut être utilisé pour vérifier si la div est visible, s'il est visible, il sera puis faites glisser l'objet vers le haut.

    InformationsquelleAutor TGarrett
  10. 0

    Voici un véritable événement de l'approche axée sur la

    • Personnalisé des événements de gérer les "invocation" et "rejeter" de la couche à pas marcher sur les pieds des autres sur les événements de
    • document.corps écoute pour renvoyer le cas uniquement lorsque la couche en question est réellement visible

    Zee code:

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

    C'est beaucoup de code, je sais, mais ici juste pour montrer une approche différente.

    InformationsquelleAutor Peter Bailey
  12. 0

    À l'aide d'un gestionnaire d'événement sur le document qui fonctionne bien pour moi:

    function popUp( élément ) 
{ 
de l'élément.onmousedown = function (event) { event.stopPropagation(); }; 
document.onmousedown = function () { popDown( element ); }; 
document.corps.appendChild( élément ); 
} 
fonction popDown( élément ) 
{ 
document.corps.removeChild( élément ); 
document.onmousedown = null; 
}
    InformationsquelleAutor Gali
  13. 0

    J'ai trouvé la solution sur un forum... mais je ne trouve pas de retour au crédit à l'origine de l'auteur.
    Voici la version modifiée qui vit dans mon code).

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

    J'ai aussi des ESC keyup liaisons et un "proche" d'ancrage html pas sur la photo ci-dessus.

    InformationsquelleAutor Yann
  14. 0

    Si vous ne voulez pas masquer l'élément qui vous permettra d'afficher en cliquant sur lui-même:

    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;
});
    InformationsquelleAutor Edison Machado
  15. -2

    Vous allez avoir besoin de surveiller la mouseDown événement pour l'ensemble de la page, mais vous aurez à prendre note lorsque l'utilisateur clique à l'intérieur de votre div flottante.

    Je suggère l'ajout d'une info-événement à votre div flottant ainsi, lorsque l'utilisateur est assis sur elle, mouseDown est pas prise en compte, mais quand il n'est pas planait sur mouseDown allait fermer, il

    InformationsquelleAutor idrumgood