événement jQuery click off

https://stackoverflow.com/questions/1423671

07-07-2019
|

Question

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

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

Quelqu'un a-t-il des idées sur la manière dont je pourrais facilement le faire?

La solution

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

Un simple événement clic sur la DIV transparente pourrait gérer le masquage et éviterait les problèmes que vous rencontrez avec l'événement click.

Autres conseils

Si vous souhaitez effacer la div lorsque vous cliquez ailleurs dans la page, vous pouvez procéder de la manière suivante:

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

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

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

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

La meilleure façon de procéder est la suivante: -

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

 var $clicked = $(e.target);

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

});

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

Par exemple, si vous cliquez sur un élément de lien pour afficher le menu div, il vous suffit de lier une fonction de flou à un élément de lien pour masquer le menu div

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

Il s’agit d’une fonction permettant de gérer l’événement de clic, je l’alimente avec le sélecteur de la fenêtre contextuelle et l’élément jquery. Probablement mieux servi comme un plugin jquery, mais cela 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"));

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

Ceci peut être utilisé pour vérifier si la div est visible, si elle est visible, l'objet sera ensuite glissé vers le haut.

Voici une approche à part entière axée sur les événements

Les événements personnalisés gèrent les "ons d'invocation " et " rejeter " de la couche pour ne pas marcher sur les pieds d'autres événements basés sur des clics
document.body n'écoute un événement de renvoi que 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.

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

L’utilisation d’un gestionnaire d’événements sur le document me convient parfaitement:

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

J'ai trouvé la solution dans un forum ... mais je ne peux pas la retrouver pour créditer l'auteur original. Voici la version (modifiée qui habite 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 raccourcis clavier ESC et une ancre HTML 'close' non illustrée ci-dessus.

Si vous ne souhaitez pas masquer l'élément à 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;
});

Vous devrez surveiller l'événement mouseDown pour l'ensemble de la page, mais vous devrez en prendre note lorsque l'utilisateur cliquera à l'intérieur de votre div flottant.

Je suggérerais d'ajouter un événement de survol à votre div flottant. Ainsi, lorsque l'utilisateur survole dessus, <=> n'est pas pris en compte, mais lorsqu'il n'est pas survolé <<> le ferme

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow