jQuery fa clic sull'evento dell'elemento

https://stackoverflow.com/questions/1423671

07-07-2019
|

Domanda

Ho un div mobile che viene visualizzato e voglio che sia nascosto quando l'utente fa clic sul div. Questo sarebbe simile al callback della funzione .hover () quando si passa con il mouse su un elemento. Solo io voglio fare questo per il clic.

Ho provato a impostare un evento click per il corpo, che nascondeva il div, ma che dava risultati inaspettati.

Qualcuno ha idee su come potrei farlo facilmente?

Soluzione

Un'altra opzione, forse più semplice, sarebbe quella di aggiungere un div trasparente tra il DIV mobile e il resto della pagina.

Un semplice evento click sul DIV trasparente potrebbe gestire il nascondiglio ed eviterebbe i problemi che stai riscontrando con l'evento click.

Altri suggerimenti

Se vuoi cancellare il div quando fai clic da qualche altra parte nella pagina, puoi fare qualcosa del tipo:

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

Se stai usando Jquery, puoi usare un selettore come:

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

Sicuramente stai cercando l'evento blur ?

Il modo migliore per farlo è: -

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

 var $clicked = $(e.target);

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

});

Questo ha funzionato per me,

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

esempio si fa clic su un elemento di collegamento per visualizzare il menu div, è sufficiente associare la funzione di sfocatura per collegare l'elemento per nascondere il menu div

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

Questa è una funzione per gestire l'evento click out, gli do da mangiare il selettore del popup e l'elemento jquery. Probabilmente meglio servito come plugin jquery, ma questo è abbastanza semplice.

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

Quindi se hai un elemento popup come <div class='popup'>test</div> puoi usare la mia funzione come clickOut("div.popup", $("div.popup"));

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

Questo può essere usato per verificare se il div è visibile, se è visibile, quindi farà scorrere l'oggetto verso l'alto.

Ecco un approccio orientato agli eventi completo

Gli eventi personalizzati gestiscono il " convocazione " e " respingendo " del livello in modo da non calpestare gli altri eventi basati sui clic
document.body ascolta un evento di licenziamento solo quando il layer in questione è effettivamente visibile

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

Conosco un sacco di codice, ma qui solo per mostrare un approccio diverso.

Puoi provare questo. http://benalman.com/projects/jquery-clickoutside-plugin/

L'uso di un gestore eventi nel documento funziona bene per me:

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

Ho trovato la soluzione in un forum ... ma non riesco a trovarla per accreditare l'autore originale. Ecco la versione (modificata che risiede nel mio codice).

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

Ho anche i collegamenti keyup ESC e un'ancora html "chiusa" non illustrata sopra.

Se non vuoi nascondere l'elemento che mostrerai facendo clic su se stesso:

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

Dovrai monitorare l'evento mouseDown per l'intera pagina, ma dovrai prendere nota quando l'utente fa clic all'interno del tuo div mobile.

Suggerirei di aggiungere un evento hover al tuo div fluttuante, quindi quando l'utente passa sopra di esso, <=> viene ignorato, ma quando non viene passato con il mouse sopra <=> lo chiudi

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow