jQuery clique off elemento evento

https://stackoverflow.com/questions/1423671

07-07-2019
|

Pergunta

Eu tenho um div flutuante que é exibido, e eu quero que ele seja escondida quando o usuário clica fora do div. Isto seria semelhante para a função de retorno .hover () quando paira fora de um elemento. Só quero fazer isso por clique.

Eu tentei apenas definindo um evento click para o corpo, que iria esconder a div, mas que deu resultados inesperados.

Alguém tem idéia de como eu poderia facilmente fazer isso?

Solução

Outro, possivelmente mais simples, opção seria adicionar uma div transparente entre o DIV flutuante e o resto da página.

Um evento simples clique sobre o DIV transparente poderia lidar com o esconderijo, e seria evitar os problemas que você está encontrando com o evento clique.

Outras dicas

Se você quiser limpar o div quando você clica em outro lugar na página, você pode fazer algo como:

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

Se você estiver usando jQuery, você poderia usar um seletor como:

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

Com certeza você está procurando o borrão evento?

A melhor maneira de fazer isso é: -

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

 var $clicked = $(e.target);

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

});

Isso funcionou para mim,

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

exemplo, você clica em um elemento link para exibir div menu, você função borrão simplesmente ligam a elemento de ligação com menu de esconder div

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

Esta é uma função para manipular o clique fora evento, eu alimentá-lo o seletor do popup, eo elemento jQuery. Provavelmente melhor servido como um plugin jQuery, mas isso é o suficiente simples.

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

Então, se você tem um elemento pop-up como <div class='popup'>test</div> você pode usar minha função como clickOut("div.popup", $("div.popup"));

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

Isto pode ser usado para verificar se o div é visível, se é visível, em seguida, irá deslizar o objeto para cima.

Aqui está uma abordagem de pleno direito orientada a eventos

Custom lidar com a "convocação" e "demitindo" da camada para não pisar no pé de outros eventos baseados em cliques
escutas document.body para uma descartar evento somente quando a camada em questão é realmente visível

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>

É um monte de código Eu sei, mas aqui apenas para mostrar uma abordagem diferente.

Você pode tentar isso. http://benalman.com/projects/jquery-clickoutside-plugin/

Usando um manipulador de eventos no documento funciona bem para mim:

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

Eu encontrei a solução em um fórum ... mas eu não posso encontrá-lo de volta para creditar o autor original. Aqui é a versão (modificada que vive no meu 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');
        //...
}

Eu também tenho ligações ESC keyup e um 'close' âncora html não na foto acima.

Se você não quiser esconder o elemento que você vai mostrar, clicando-se:

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

Você vai necessidade de monitorar o evento mouseDown para a página inteira, mas você tem que tomar nota quando o usuário está clicando dentro de sua div flutuante.

Gostaria de sugerir a adição de um evento em foco à sua div flutuou por isso, quando o usuário está pairando sobre ele, mouseDown é desconsiderada, mas quando ele não está sendo pairado sobre mouseDown iria fechá-lo

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow