Utilisez jQuery pour masquer un DIV lorsque l'utilisateur clique en dehors de celui-ci

J'utilise ce code:

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

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

Et ce HTML :

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

Le problème est que j'ai des liens à l'intérieur du divet quand ils ne fonctionnent plus lorsqu'ils sont cliqués.

Eu le même problème, est venu avec cette solution facile. Cela fonctionne même récursivement:

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

Vous feriez mieux d'aller avec quelque chose comme ça:

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

Ce code détecte tout événement de clic sur la page, puis masque l' #CONTAINERélément si et seulement si l'élément cliqué n'était ni l' #CONTAINERélément ni l'un de ses descendants.

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

Vous souhaiterez peut-être vérifier la cible de l'événement de clic qui se déclenche pour le corps au lieu de compter sur stopPropagation.

Quelque chose comme:

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

De plus, l'élément body peut ne pas inclure tout l'espace visuel affiché dans le navigateur. Si vous remarquez que vos clics ne sont pas enregistrés, vous devrez peut-être ajouter à la place le gestionnaire de clics pour l'élément HTML.

DÉMO en direct

Vérifier que la zone de clic n'est pas dans l'élément ciblé ou dans son enfant

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

MISE À JOUR:

jQuery stop propagation est la meilleure solution

DÉMO en direct

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

Mise à jour de la solution pour:

• utilisez plutôt mouseenter et mouseleave
• de survoler utiliser la liaison d'événements en direct

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

Une solution sans jQuery pour la réponse la plus populaire :

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

Démo en direct avec ESCfonctionnalité

Fonctionne à la fois sur ordinateur et sur mobile

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

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

_{Si dans certains cas, vous devez être sûr que votre élément est vraiment visible lorsque vous cliquez sur le document: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

Est-ce que quelque chose comme ça ne marcherait pas?

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

});

ou

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

});

Encore plus léger:

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

Au lieu d'écouter chaque clic sur le DOM pour masquer un élément spécifique, vous pouvez définir tabindexle parent <div>et écouter les focusoutévénements.

Le réglage tabindexs'assurera que l' blurévénement est déclenché sur le <div>(normalement il ne le ferait pas).

Ainsi, votre HTML ressemblerait à:

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

Et votre JS:

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

Et pour les appareils tactiles comme IPAD et IPHONE, nous pouvons utiliser le code suivant

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

Voici un jsfiddle que j'ai trouvé sur un autre fil, fonctionne également avec la touche 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()
      }
    })

Construit à partir de la réponse impressionnante de 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);
    }
  });
}

Cela ajoute quelques éléments ...

1. Placé dans une fonction avec un rappel avec des arguments "illimités"
2. Ajout d'un appel à .off () de jquery associé à un espace de noms d'événement pour dissocier l'événement du document une fois qu'il a été exécuté.
3. Touchend inclus pour la fonctionnalité mobile

J'espère que ça aidera quelqu'un!

si vous avez des problèmes avec ios, mouseup ne fonctionne pas sur l'appareil Apple.

est-ce que mousedown / mouseup dans jquery fonctionne pour l'ipad?

j'utilise ceci:

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

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

(Ajout juste à la réponse de prc322.)

Dans mon cas, j'utilise ce code pour masquer un menu de navigation qui apparaît lorsque l'utilisateur clique sur un onglet approprié. J'ai trouvé utile d'ajouter une condition supplémentaire, à savoir que la cible du clic en dehors du conteneur n'est pas un lien.

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

En effet, certains des liens de mon site ajoutent du nouveau contenu à la page. Si ce nouveau contenu est ajouté en même temps que le menu de navigation disparaît, il peut être désorientant pour l'utilisateur.

Tant de réponses, doit être un droit de passage pour en avoir ajouté une ... Je n'ai pas vu de réponses actuelles (jQuery 3.1.1) - donc:

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

pest le nom de l'élément. Où l'on peut également passer l'id ou le nom de classe ou d'élément.

Renvoyez false si vous cliquez sur .form_wrapper:

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

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

Attachez un événement de clic aux éléments de niveau supérieur en dehors de l'encapsuleur de formulaire, par exemple:

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

Cela fonctionnera également sur les appareils tactiles, assurez-vous simplement de ne pas inclure un parent de .form_wrapper dans votre liste de sélecteurs.

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

}); 

VIOLON

Copié de https://sdtuts.com/click-on-not-specified-element/

Démo en direct 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");
        }
    })
})

je l'ai fait comme ça:

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

En utilisant ce code, vous pouvez masquer autant d'éléments que vous le souhaitez

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

Ce que vous pouvez faire est de lier un événement de clic au document qui masquera la liste déroulante si quelque chose en dehors de la liste déroulante est cliqué, mais ne le masquera pas si quelque chose à l'intérieur de la liste déroulante est cliqué, donc votre événement "show" (ou glissé ou autre) montre la liste déroulante)

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

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

    });

Ensuite, lorsque vous le cachez, dissociez l'événement de clic

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

Selon les documents , .blur()fonctionne plus que la <input>balise. Par exemple:

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