cela a parfaitement fonctionné pour moi!!

$('html').click(function (e) {
    if (e.target.id == 'YOUR-DIV-ID') {
        //do something
    } else {
        //do something
    }
});

après la recherche, j'ai trouvé trois solutions de travail (j'ai oublié les liens de page pour référence)

première solution

<script>
    //The good thing about this solution is it doesn't stop event propagation.

    var clickFlag = 0;
    $('body').on('click', function () {
        if(clickFlag == 0) {
            console.log('hide element here');
            /* Hide element here */
        }
        else {
            clickFlag=0;
        }
    });
    $('body').on('click','#testDiv', function (event) {
        clickFlag = 1;
        console.log('showed the element');
        /* Show the element */
    });
</script>

deuxième solution

<script>
    $('body').on('click', function(e) {
        if($(e.target).closest('#testDiv').length == 0) {
           /* Hide dropdown here */
        }
    });
</script>

troisième solution

<script>
    var specifiedElement = document.getElementById('testDiv');
    document.addEventListener('click', function(event) {
        var isClickInside = specifiedElement.contains(event.target);
        if (isClickInside) {
          console.log('You clicked inside')
        }
        else {
          console.log('You clicked outside')
        }
    });
</script>

Je ne pense pas que ce dont vous avez vraiment besoin est de fermer le menu lorsque l'utilisateur clique à l'extérieur; ce que vous avez besoin est que le menu se ferme lorsque l'utilisateur clique n'importe où sur la page. Si vous cliquez sur le menu, ou hors du menu, il devrait fermer à droite?

trouver aucune réponse satisfaisante ci-dessus m'a incité à écrire ce billet de blog l'autre jour. Pour les plus pédants, il y a un certain nombre de gotchas à noter:

1. si vous attachez un gestionnaire d'événement de clic à l'élément de corps au moment du clic soyez sûr d'attendre le 2ème clic avant de fermer le menu, et délier l'événement. Sinon, l'événement de clic qui a ouvert le menu va bulle jusqu'à l'auditeur qui doit fermer le menu.
2. si vous utilisez event.stopPropogation () sur un événement de clic, aucun autre élément de votre page ne peut avoir une fonctionnalité de clic-anywhere-to-close.
3. attacher un click event handler au corps élément indéfiniment n'est pas une solution performante
4. comparer la cible de l'événement, et ses parents au créateur du gestionnaire suppose que ce que vous voulez est de fermer le menu lorsque vous cliquez dessus, quand ce que vous voulez vraiment est de le fermer lorsque vous cliquez n'importe où sur la page.
5. L'écoute des événements sur l'élément body rendra votre code plus fragile. Un style aussi innocent que celui-ci le briserait: body { margin-left:auto; margin-right: auto; width:960px;}

comme le dit une autre affiche, il y a beaucoup de gotchas, surtout si l'élément que vous affichez (dans ce cas un menu) a des éléments interactifs. J'ai trouvé la méthode suivante assez robuste:

$('#menuscontainer').click(function(event) {
    //your code that shows the menus fully

    //now set up an event listener so that clicking anywhere outside will close the menu
    $('html').click(function(event) {
        //check up the tree of the click target to check whether user has clicked outside of menu
        if ($(event.target).parents('#menuscontainer').length==0) {
            // your code to hide menu

            //this event listener has done its job so we can unbind it.
            $(this).unbind(event);
        }

    })
});

Vérifiez la cible d'événement de clic de fenêtre (il devrait se propager à la fenêtre, tant qu'il n'est pas capturé ailleurs), et assurez-vous que ce n'est pas l'un des éléments de menu. Si ce n'est pas le cas, alors vous êtes en dehors de votre menu.

Ou vérifier la position du clic, et voir si elle est contenue dans la zone de menu.

une solution simple pour la situation est:

$(document).mouseup(function (e)
{
    var container = $("YOUR SELECTOR"); // Give you class or ID

    if (!container.is(e.target) &&            // If the target of the click is not the desired div or section
        container.has(e.target).length === 0) // ... nor a descendant-child of the container
    {
        container.hide();
    }
});

le script ci-dessus masquera le div si l'événement de clic div est déclenché.

vous pouvez voir le blog suivant pour plus d'informations: http://www.codecanal.com/detect-click-outside-div-using-javascript /

Solution 1

au lieu d'utiliser event.stopPropagation() qui peut avoir des effets secondaires, il suffit de définir une simple variable flag et d'ajouter une condition if . J'ai testé ceci et j'ai bien travaillé sans aucun effet d'arrêt:

var flag = "1";
$('#menucontainer').click(function(event){
    flag = "0"; // flag 0 means click happened in the area where we should not do any action
});

$('html').click(function() {
    if(flag != "0"){
        // Hide the menus if visible
    }
    else {
        flag = "1";
    }
});

Solution2

avec juste un simple if condition:

$(document).on('click', function(event){
    var container = $("#menucontainer");
    if (!container.is(event.target) &&            // If the target of the click isn't the container...
        container.has(event.target).length === 0) // ... nor a descendant of the container
    {
        // Do whatever you want to do when click is outside the element
    }
});

comme variante:

var $menu = $('#menucontainer');
$(document).on('click', function (e) {

    // If element is opened and click target is outside it, hide it
    if ($menu.is(':visible') && !$menu.is(e.target) && !$menu.has(e.target).length) {
        $menu.hide();
    }
});

il n'a pas de problème avec arrêt de la propagation de l'événement et supporte mieux plusieurs menus sur la même page où en cliquant sur un second menu alors qu'un premier est ouvert laissera le premier ouvert dans la solution de stopPropagation.

j'ai eu du succès avec quelque chose comme ça:

var $menuscontainer = ...;

$('#trigger').click(function() {
  $menuscontainer.show();

  $('body').click(function(event) {
    var $target = $(event.target);

    if ($target.parents('#menuscontainer').length == 0) {
      $menuscontainer.hide();
    }
  });
});

la logique est la suivante: lorsque #menuscontainer est affiché, liez un gestionnaire de clic au corps qui cache #menuscontainer seulement si la cible (du clic) n'en est pas un enfant.

j'ai trouvé cette méthode dans un plugin jQuery calendar.

function ClickOutsideCheck(e)
{
  var el = e.target;
  var popup = $('.popup:visible')[0];
  if (popup==undefined)
    return true;

  while (true){
    if (el == popup ) {
      return true;
    } else if (el == document) {
      $(".popup").hide();
      return false;
    } else {
      el = $(el).parent()[0];
    }
  }
};

$(document).bind('mousedown.popup', ClickOutsideCheck);

si vous êtes un script pour IE et FF 3.* et vous voulez juste savoir si le clic s'est produit dans une certaine zone de boîte, vous pouvez également utiliser quelque chose comme:

this.outsideElementClick = function(objEvent, objElement){   
var objCurrentElement = objEvent.target || objEvent.srcElement;
var blnInsideX = false;
var blnInsideY = false;

if (objCurrentElement.getBoundingClientRect().left >= objElement.getBoundingClientRect().left && objCurrentElement.getBoundingClientRect().right <= objElement.getBoundingClientRect().right)
    blnInsideX = true;

if (objCurrentElement.getBoundingClientRect().top >= objElement.getBoundingClientRect().top && objCurrentElement.getBoundingClientRect().bottom <= objElement.getBoundingClientRect().bottom)
    blnInsideY = true;

if (blnInsideX && blnInsideY)
    return false;
else
    return true;}

au lieu d'utiliser l'interruption du flux, l'événement flou/focus ou toute autre technique délicate, il suffit de faire correspondre le flux d'événement avec la parenté de l'élément:

$(document).on("click.menu-outside", function(event){
    // Test if target and it's parent aren't #menuscontainer
    // That means the click event occur on other branch of document tree
    if(!$(event.target).parents().andSelf().is("#menuscontainer")){
        // Click outisde #menuscontainer
        // Hide the menus (but test if menus aren't already hidden)
    }
});

pour supprimer cliquez sur outside event listener, simplement:

$(document).off("click.menu-outside");

Voici la solution JavaScript vanille pour les futurs téléspectateurs.

en cliquant sur un élément dans le document, si l'id de l'élément cliqué est basculé, ou si l'élément caché n'est pas caché et que l'élément caché ne contient pas l'élément cliqué, basculer l'élément.

(function () {
    "use strict";
    var hidden = document.getElementById('hidden');
    document.addEventListener('click', function (e) {
        if (e.target.id == 'toggle' || (hidden.style.display != 'none' && !hidden.contains(e.target))) hidden.style.display = hidden.style.display == 'none' ? 'block' : 'none';
    }, false);
})();

(function () {
    "use strict";
    var hidden = document.getElementById('hidden');
    document.addEventListener('click', function (e) {
        if (e.target.id == 'toggle' || (hidden.style.display != 'none' && !hidden.contains(e.target))) hidden.style.display = hidden.style.display == 'none' ? 'block' : 'none';
    }, false);
})();

<a href="javascript:void(0)" id="toggle">Toggle Hidden Div</a>
<div id="hidden" style="display: none;">This content is normally hidden. click anywhere other than this content to make me disappear</div>

Si vous allez avoir plusieurs bascule sur la même page, vous pouvez utiliser quelque chose comme ceci:

1. ajouter le nom de classe hidden à l'article pliable.
2. après le clic de document, fermer tous les éléments cachés qui ne contiennent pas l'élément cliqué et ne sont pas cachés
3. Si l'élément cliqué est une bascule, bascule l'élément spécifié.

(function () {
    "use strict";
    var hiddenItems = document.getElementsByClassName('hidden'), hidden;
    document.addEventListener('click', function (e) {
        for (var i = 0; hidden = hiddenItems[i]; i++) {
            if (!hidden.contains(e.target) && hidden.style.display != 'none')
                hidden.style.display = 'none';
        }
        if (e.target.getAttribute('data-toggle')) {
            var toggle = document.querySelector(e.target.getAttribute('data-toggle'));
            toggle.style.display = toggle.style.display == 'none' ? 'block' : 'none';
        }
    }, false);
})();

<a href="javascript:void(0)" data-toggle="#hidden1">Toggle Hidden Div</a>
<div class="hidden" id="hidden1" style="display: none;" data-hidden="true">This content is normally hidden</div>
<a href="javascript:void(0)" data-toggle="#hidden2">Toggle Hidden Div</a>
<div class="hidden" id="hidden2" style="display: none;" data-hidden="true">This content is normally hidden</div>
<a href="javascript:void(0)" data-toggle="#hidden3">Toggle Hidden Div</a>
<div class="hidden" id="hidden3" style="display: none;" data-hidden="true">This content is normally hidden</div>

L'événement a une propriété appelée événement.chemin de l'élément qui est une "liste statique ordonnée de tous ses ancêtres dans l'ordre des arbres" . Pour vérifier si un événement provient d'un élément DOM spécifique ou d'un de ses enfants, il suffit de vérifier le chemin pour cet élément DOM spécifique. Il peut également être utilisé pour vérifier plusieurs éléments par logiquement OR dans le contrôle de l'élément dans la fonction some .

$("body").click(function() {
  target = document.getElementById("main");
  flag = event.path.some(function(el, i, arr) {
    return (el == target)
  })
  if (flag) {
    console.log("Inside")
  } else {
    console.log("Outside")
  }
});

#main {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <ul>
    <li>Test-Main</li>
    <li>Test-Main</li>
    <li>Test-Main</li>
    <li>Test-Main</li>
    <li>Test-Main</li>
  </ul>
</div>
<div id="main2">
  Outside Main
</div>

donc pour votre cas il devrait être

$("body").click(function() {
  target = $("#menuscontainer")[0];
  flag = event.path.some(function(el, i, arr) {
    return (el == target)
  });
  if (!flag) {
    // Hide the menus
  }
});

Crochet un écouteur d'événement clic sur le document. À l'intérieur de l'écouteur d'événements, vous pouvez regarder "event object , en particulier, l'événement .cible pour voir quel élément a été cliqué:

$(document).click(function(e){
    if ($(e.target).closest("#menuscontainer").length == 0) {
        // .closest can help you determine if the element 
        // or one of its ancestors is #menuscontainer
        console.log("hide");
    }
});

utiliser:

var go = false;
$(document).click(function(){
    if(go){
        $('#divID').hide();
        go = false;
    }
})

$("#divID").mouseover(function(){
    go = false;
});

$("#divID").mouseout(function (){
    go = true;
});

$("btnID").click( function(){
    if($("#divID:visible").length==1)
        $("#divID").hide(); // Toggle
    $("#divID").show();
});

$(document).click(function() {
    $(".overlay-window").hide();
});
$(".overlay-window").click(function() {
    return false;
});

, Si vous cliquez sur le document, de masquer un élément donné, sauf si vous cliquez sur le même élément.

Upvote pour la réponse la plus populaire, mais ajouter

&& (e.target != $('html').get(0)) // ignore the scrollbar

donc, un clic sur une barre de défilement ne cache pas votre élément cible.

pour une utilisation plus facile, et un code plus expressif, j'ai créé un plugin jQuery pour ceci:

$('div.my-element').clickOut(function(target) { 
    //do something here... 
});

Note: cible est l'élément que l'utilisateur a cliqué. Mais le callback est toujours exécuté dans le contexte de l'élément original, donc vous pouvez utiliser ce comme vous vous y attendiez dans un callback jQuery.

Plugin:

$.fn.clickOut = function (parent, fn) {
    var context = this;
    fn = (typeof parent === 'function') ? parent : fn;
    parent = (parent instanceof jQuery) ? parent : $(document);

    context.each(function () {
        var that = this;
        parent.on('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.is(that) && !clicked.parents().is(that)) {
                if (typeof fn === 'function') {
                    fn.call(that, clicked);
                }
            }
        });

    });
    return context;
};

par défaut, l'écouteur de clics event est placé sur le document. Cependant, si vous voulez limiter la portée de l'écouteur d'événements, vous pouvez passer dans un objet jQuery représentant un élément de niveau parent qui sera le parent supérieur auquel les clics seront écoutés. Cela évite les écouteurs d'événements inutiles au niveau du document. Évidemment, cela ne fonctionnera pas à moins que l'élément parent fourni soit un parent de votre Élément initial.

utiliser comme suit:

$('div.my-element').clickOut($('div.my-parent'), function(target) { 
    //do something here...
});

C'est ma solution à ce problème:

$(document).ready(function() {
  $('#user-toggle').click(function(e) {
    $('#user-nav').toggle();
    e.stopPropagation();
  });

  $('body').click(function() {
    $('#user-nav').hide(); 
  });

  $('#user-nav').click(function(e){
    e.stopPropagation();
  });
});

j'ai fini par faire quelque chose comme ça:

$(document).on('click', 'body, #msg_count_results .close',function() {
    $(document).find('#msg_count_results').remove();
});
$(document).on('click','#msg_count_results',function(e) {
    e.preventDefault();
    return false;
});

j'ai un bouton de fermeture dans le nouveau conteneur pour les besoins de L'interface utilisateur conviviale. J'ai dû utiliser return false pour ne pas passer. Bien sûr, avoir un A HREF là-bas pour vous emmener quelque part serait sympa, ou vous pourriez appeler quelques trucs ajax à la place. De toute façon, cela fonctionne bien pour moi. Ce que je voulais.

nous avons mis en place une solution, basée en partie sur un commentaire d'un utilisateur ci-dessus, qui fonctionne parfaitement pour nous. Nous l'utilisons pour masquer une zone de recherche / résultats lorsque vous cliquez en dehors de ces éléments, à l'exclusion de l'élément à l'origine.

// HIDE SEARCH BOX IF CLICKING OUTSIDE
$(document).click(function(event){ 
    // IF NOT CLICKING THE SEARCH BOX OR ITS CONTENTS OR SEARCH ICON 
    if ($("#search-holder").is(":visible") && !$(event.target).is("#search-holder *, #search")) {
        $("#search-holder").fadeOut('fast');
        $("#search").removeClass('active');
    }
});

il vérifie si la boîte de recherche est déjà visible en premier, et dans notre cas, il supprime également une classe active sur le bouton de recherche hide/show.

fonction:

$(function() {
    $.fn.click_inout = function(clickin_handler, clickout_handler) {
        var item = this;
        var is_me = false;
        item.click(function(event) {
            clickin_handler(event);
            is_me = true;
        });
        $(document).click(function(event) {
            if (is_me) {
                is_me = false;
            } else {
                clickout_handler(event);
            }
        });
        return this;
    }
});

Utilisation:

this.input = $('<input>')
    .click_inout(
        function(event) { me.ShowTree(event); },
        function() { me.Hide(); }
    )
    .appendTo(this.node);

et les fonctions sont très simples:

ShowTree: function(event) {
    this.data_span.show();
}
Hide: function() {
    this.data_span.hide();
}