Utilizzare jQuery per nascondere un DIV quando l'utente fa clic all'esterno di esso

Sto usando questo codice:

$('body').click(function() {
   $('.form_wrapper').hide();
});

$('.form_wrapper').click(function(event){
   event.stopPropagation();
});

E questo HTML :

<div class="form_wrapper">
   <a class="agree" href="javascript:;">I Agree</a>
   <a class="disagree" href="javascript:;">Disagree</a>
</div>

Il problema è che ho link all'interno dive quando non funzionano più quando si fa clic.

Ho avuto lo stesso problema, ho trovato questa soluzione semplice. Funziona anche in modo ricorsivo:

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

Faresti meglio ad andare con qualcosa del genere:

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.form_wrapper').hide();
    });
});

Questo codice rileva qualsiasi evento click sulla pagina e quindi nasconde l' #CONTAINERelemento se e solo se l'elemento cliccato non era né l' #CONTAINERelemento né uno dei suoi discendenti.

$(document).on('click', function (e) {
    if ($(e.target).closest("#CONTAINER").length === 0) {
        $("#CONTAINER").hide();
    }
});

Potresti voler controllare la destinazione dell'evento click che si attiva per il corpo invece di fare affidamento su stopPropagation.

Qualcosa di simile a:

$("body").click
(
  function(e)
  {
    if(e.target.className !== "form_wrapper")
    {
      $(".form_wrapper").hide();
    }
  }
);

Inoltre, l'elemento body potrebbe non includere l'intero spazio visivo mostrato nel browser. Se noti che i tuoi clic non si stanno registrando, potrebbe essere necessario aggiungere invece il gestore di clic per l'elemento HTML.

Dimostrazione dal vivo

Verifica che l'area dei clic non sia nell'elemento target o nella sua sezione figlio

$(document).click(function (e) {
    if ($(e.target).parents(".dropdown").length === 0) {
        $(".dropdown").hide();
    }
});

AGGIORNARE:

jQuery stop propagation è la soluzione migliore

Dimostrazione dal vivo

$(".button").click(function(e){
    $(".dropdown").show();
     e.stopPropagation();
});

$(".dropdown").click(function(e){
    e.stopPropagation();
});

$(document).click(function(){
    $(".dropdown").hide();
});

$(document).click(function(event) {
    if ( !$(event.target).hasClass('form_wrapper')) {
         $(".form_wrapper").hide();
    }
});

Aggiornato la soluzione a:

• usa invece mouseenter e mouseleave
• di hover usa l'associazione di eventi live

var mouseOverActiveElement = false;

$('.active').live('mouseenter', function(){
    mouseOverActiveElement = true; 
}).live('mouseleave', function(){ 
    mouseOverActiveElement = false; 
});
$("html").click(function(){ 
    if (!mouseOverActiveElement) {
        console.log('clicked outside active element');
    }
});

Una soluzione senza jQuery per la risposta più popolare :

document.addEventListener('mouseup', function (e) {
    var container = document.getElementById('your container ID');

    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
}.bind(this));

MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains

Demo live con ESCfunzionalità

Funziona sia su desktop che su dispositivo mobile

var notH = 1,
    $pop = $('.form_wrapper').hover(function(){ notH^=1; });

$(document).on('mousedown keydown', function( e ){
  if(notH||e.which==27) $pop.hide();
});

_{Se per alcuni casi devi essere sicuro che il tuo elemento sia davvero visibile quando fai clic sul documento: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

Qualcosa del genere non funzionerebbe?

$("body *").not(".form_wrapper").click(function() {

});

o

$("body *:not(.form_wrapper)").click(function() {

});

Anche sleaker:

$("html").click(function(){ 
    $(".wrapper:visible").hide();
});

Invece di ascoltare ogni singolo clic sul DOM per nascondere un elemento specifico, è possibile impostare tabindexil genitore <div>e ascoltarefocusout eventi.

L'impostazione tabindexassicurerà che l' blurevento venga generato sul<div> (normalmente non lo farebbe).

Quindi il tuo HTML sarebbe simile a:

<div class="form_wrapper" tabindex="0">
    <a class="agree" href="javascript:;">I Agree</a>
    <a class="disagree" href="javascript:;">Disagree</a>
</div>

E il tuo JS:

$('.form_wrapper').on('focusout', function(event){
    $('.form_wrapper').hide();
});

E per dispositivi Touch come IPAD e IPHONE possiamo usare il seguente codice

$(document).on('touchstart', function (event) {
var container = $("YOUR CONTAINER SELECTOR");

if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

Ecco un jsfiddle che ho trovato su un altro thread, funziona anche con il tasto esc: http://jsfiddle.net/S5ftb/404

    var button = $('#open')[0]
    var el     = $('#test')[0]

    $(button).on('click', function(e) {
      $(el).show()
      e.stopPropagation()
    })

    $(document).on('click', function(e) {
      if ($(e.target).closest(el).length === 0) {
        $(el).hide()
      }
    })

    $(document).on('keydown', function(e) {
      if (e.keyCode === 27) {
        $(el).hide()
      }
    })

Costruito sulla fantastica risposta di prc322.

function hideContainerOnMouseClickOut(selector, callback) {
  var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
  $(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
    var container = $(selector);

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
      container.hide();
      $(document).off("mouseup.clickOFF touchend.clickOFF");
      if (callback) callback.apply(this, args);
    }
  });
}

Questo aggiunge un paio di cose ...

1. Inserito in una funzione con un callback con argomenti "illimitati"
2. Aggiunta una chiamata al .off () di jquery associato a uno spazio dei nomi di evento per separare l'evento dal documento una volta eseguito.
3. Touchend incluso per funzionalità mobile

Spero che questo aiuti qualcuno!

se hai problemi con iOS, il mouseup non funziona sul dispositivo Apple.

mousedown / mouseup in jquery funziona per l'ipad?

io uso questo:

$(document).bind('touchend', function(e) {
        var container = $("YOURCONTAINER");

          if (container.has(e.target).length === 0)
          {
              container.hide();
          }
      });

(Basta aggiungere alla risposta di prc322.)

Nel mio caso sto usando questo codice per nascondere un menu di navigazione che appare quando l'utente fa clic su una scheda appropriata. Ho trovato utile aggiungere una condizione aggiuntiva, che la destinazione del clic all'esterno del contenitore non è un collegamento.

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!$("a").is(e.target) // if the target of the click isn't a link ...
        && !container.is(e.target) // ... or the container ...
        && container.has(e.target).length === 0) // ... or a descendant of the container
    {
        container.hide();
    }
});

Questo perché alcuni dei collegamenti sul mio sito aggiungono nuovi contenuti alla pagina. Se questo nuovo contenuto viene aggiunto contemporaneamente alla scomparsa del menu di navigazione, potrebbe essere disorientante per l'utente.

Così tante risposte, deve essere un diritto di passaggio per averne aggiunto uno ... Non ho visto le risposte attuali (jQuery 3.1.1) - quindi:

$(function() {
    $('body').on('mouseup', function() {
        $('#your-selector').hide();
    });
});

var n = 0;
$("#container").mouseenter(function() {
n = 0;

}).mouseleave(function() {
n = 1;
});

$("html").click(function(){ 
if (n == 1) {
alert("clickoutside");
}
});

 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

pè il nome dell'elemento. Dove si può passare anche l'id o la classe o il nome dell'elemento.

Restituisce false se si fa clic su .form_wrapper:

$('body').click(function() {
  $('.form_wrapper').click(function(){
  return false
});
   $('.form_wrapper').hide();
});

//$('.form_wrapper').click(function(event){
//   event.stopPropagation();
//});

Allega un evento click agli elementi di livello superiore all'esterno del wrapper del modulo, ad esempio:

$('#header, #content, #footer').click(function(){
    $('.form_wrapper').hide();
});

Funzionerà anche su dispositivi touch, assicurati di non includere un genitore di .form_wrapper nell'elenco dei selettori.

var exclude_div = $("#ExcludedDiv");;  
$(document).click(function(e){
   if( !exclude_div.is( e.target ) )  // if target div is not the one you want to exclude then add the class hidden
        $(".myDiv1").addClass("hidden");  

}); 

VIOLINO

Copiato da https://sdtuts.com/click-on-not-specified-element/

Demo live http://demos.sdtuts.com/click-on-specified-element

$(document).ready(function () {
    var is_specified_clicked;
    $(".specified_element").click(function () {
        is_specified_clicked = true;
        setTimeout(function () {
            is_specified_clicked = false;
        }, 200);
    })
    $("*").click(function () {
        if (is_specified_clicked == true) {
//WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS
            $(".event_result").text("you were clicked on specified element");
        } else {
//WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED
            $(".event_result").text("you were clicked not on specified element");
        }
    })
})

l'ho fatto così:

var close = true;

$(function () {

    $('body').click (function(){

        if(close){
            div.hide();
        }
        close = true;
    })


alleswasdenlayeronclicknichtschliessensoll.click( function () {   
        close = false;
    });

});

dojo.query(document.body).connect('mouseup',function (e)
{
    var obj = dojo.position(dojo.query('div#divselector')[0]);
    if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){
        MyDive.Hide(id);
    }
});

Usando questo codice puoi nascondere tutti gli elementi che vuoi

var boxArray = ["first element's id","second element's id","nth element's id"];
   window.addEventListener('mouseup', function(event){
   for(var i=0; i < boxArray.length; i++){
    var box = document.getElementById(boxArray[i]);
    if(event.target != box && event.target.parentNode != box){
        box.style.display = 'none';
    }
   }
})

Quello che puoi fare è associare un evento click al documento che nasconderà il menu a discesa se si fa clic su qualcosa all'esterno del menu a discesa, ma non lo nasconderà se si fa clic su qualcosa all'interno del menu a discesa, quindi il tuo evento "show" (o scorrevole o altro mostra il menu a discesa)

    $('.form_wrapper').show(function(){

        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass("class-of-dropdown-container")) {
                 $('.form_wrapper').hide();
            }
        });

    });

Quindi, quando lo nascondi, separa l'evento click

$(document).unbind('click');

Secondo i documenti , .blur()funziona per più del <input>tag. Per esempio:

$('.form_wrapper').blur(function(){
   $(this).hide();
});