jQuery haga clic en elemento evento

https://stackoverflow.com/questions/1423671

07-07-2019
|

Pregunta

Tengo un div flotante que se muestra, y quiero que se oculta cuando el usuario hace clic fuera de la div.Esto sería similar a la .hover() la función de devolución de llamada cuando se pasa el mouse fuera de un elemento.Sólo quiero hacer esto por clic.

Traté de establecer un evento click para el cuerpo, lo que podría ocultar el div, pero que dio resultados inesperados.

Alguien tiene ideas sobre cómo podría hacerlo fácilmente?

Solución

Otra opción, posiblemente más simple, 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 la ocultación, y evitaría los problemas que está encontrando con el evento de clic.

Otros consejos

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

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

Si está utilizando Jquery, podría usar un selector como:

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

Seguramente estás buscando el evento blur

La mejor manera de hacer esto es: -

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

 var $clicked = $(e.target);

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

});

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

ejemplo, hace clic en un elemento de enlace para mostrar el menú div, simplemente vincula la función de desenfoque al elemento de enlace para ocultar el menú div

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

Esta es una función para manejar el evento click out, le doy de comer el selector de la ventana emergente y el elemento jquery. Probablemente mejor sirvió como un complemento jquery, pero esto es lo suficientemente 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);
};

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

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

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

He aquí un completo evento de enfoque impulsado por la

Eventos personalizados de la manija de la "convocatoria" y "despedir" de la capa para que no paso en los dedos de los pies de otros haga clic en eventos de
documento.cuerpo de escucha para despedir a un evento sólo cuando la capa en cuestión es realmente visible

Zee código:

<!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 sé, pero aquí sólo para mostrar un enfoque diferente.

Puedes probar esto. http://benalman.com/projects/jquery-clickoutside-plugin/

Usar un controlador de eventos en el documento me funciona bien:

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

He encontrado la solución en un foro ... pero no puedo encontrarla para dar crédito 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 tengo enlaces de teclado ESC y un ancla html 'close' que no se muestra arriba.

Si no desea ocultar el elemento que mostrará haciendo clic en sí mismo:

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

Tendrá que controlar el evento mouseDown para toda la página, pero deberá tomar nota cuando el usuario haga clic dentro de su div flotante.

Sugeriría agregar un evento flotante a su div flotante para que cuando el usuario se mueva sobre él, <=> no se tenga en cuenta, pero cuando no se lo pasa por encima, <=> lo cerrará

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow