web-dev-qa-db-fra.com

Événement d'élément jQuery click off

J'ai un div flottant qui s'affiche, et je veux qu'il soit masqué lorsque l'utilisateur clique sur le div. Cela serait similaire à la fonction de rappel .hover () lors du survol d'un élément. Seulement, je veux le faire pour cliquer.

J'ai essayé de définir un événement de clic pour le corps, ce qui masquerait la division, mais cela a donné des résultats inattendus.

Quelqu'un a des idées sur la façon dont je pourrais facilement faire cela?

javascriptjqueryclick
44
Nic Hubbard

Une autre option, peut-être plus simple, serait d'ajouter un div transparent entre le DIV flottant et le reste de la page.

Un simple événement de clic sur le DIV transparent pourrait gérer le masquage, et cela éviterait les problèmes que vous rencontrez avec l'événement de clic.

19
PhillFox

Si vous souhaitez 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();
    };
});
86
David Bennett

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

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

Vous recherchez sûrement l'événement flo ?

10
annakata

La meilleure façon de le faire est: -

    
 $ (document) .bind ('click', fonction (e) {
 
 var $ clicked = $ (e.target); 
 
 if (! $ clicked.parents (). hasClass ("divtohide")) {
 $ (". divtohide"). hide (); 
} 
 
});
9
Salman von Abbas

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

exemple, vous cliquez sur un élément de lien pour afficher le menu div, vous liez simplement la fonction de flou à l'élément de lien pour masquer le menu div

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

Il s'agit d'une fonction pour gérer l'événement click out, je lui donne le sélecteur de la popup et l'élément jquery. Probablement mieux servi de 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 élément popup comme <div class='popup'>test</div> Vous pouvez utiliser ma fonction comme clickOut("div.popup", $("div.popup"));

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

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

1
TGarrett

J'ai trouvé la solution dans un forum ... mais je ne la retrouve pas pour créditer l'auteur original. 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 également des liaisons de touches ESC et une ancre html "fermée" non illustrée ci-dessus.

0
Yann

Voici une approche événementielle à part entière

  • Les événements personnalisés gèrent "l'invocation" et le "rejet" de la couche pour ne pas marcher sur les orteils d'autres événements basés sur des clics
  • document.body écoute un événement de rejet uniquement lorsque le calque en question est réellement visible

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

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

0
Peter Bailey

Si vous ne souhaitez pas masquer l'élément que vous afficherez 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;
});
0
Edison Machado

L'utilisation d'un gestionnaire d'événements sur le document fonctionne bien pour moi:

 fonction popUp (élément) 
 {
 element.onmousedown = fonction (événement) {event.stopPropagation (); }; 
 document.onmousedown = function () {popDown (element); }; 
 
 document.body.appendChild (élément); 
} 
 
 fonction popDown (élément) 
 {
 document.body.removeChild (element); 
 
 document.onmousedown = null; 
}
0
Gali

Vous pouvez essayer ça. http://benalman.com/projects/jquery-clickoutside-plugin/

0
rado