Verwenden Sie jQuery, um einen DIV auszublenden, wenn der Benutzer außerhalb davon klickt

Du solltest besser so etwas machen:

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

Dieser Code erkennt alle Klickereignisse auf der Seite und blendet das #CONTAINER -Element nur dann aus, wenn das angeklickte Element weder das #CONTAINER -Element noch eines seiner Nachkommen war.

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

Möglicherweise möchten Sie das Ziel des Click-Ereignisses überprüfen, das für den Body ausgelöst wird, anstatt sich auf stopPropagation zu verlassen.

So etwas wie:

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

Außerdem enthält das body-Element möglicherweise nicht den gesamten visuellen Bereich, der im Browser angezeigt wird. Wenn Sie feststellen, dass Ihre Klicks nicht registriert werden, müssen Sie möglicherweise stattdessen den Klick-Handler für das HTML-Element hinzufügen.

Live DEMO

Überprüfen Sie, ob sich der Klickbereich nicht im Zielelement oder im untergeordneten Element befindet

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

UPDATE:

jQuery Stop Propagation ist die beste Lösung

Live DEMO

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

Die Lösung wurde aktualisiert auf:

• benutze stattdessen mouseenter und mouseleave
• von hover benutze live event bindung

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

Eine Lösung ohne jQuery für die beliebteste Antwort :

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

Live-Demo mit ESC Funktionalität

Funktioniert sowohl auf Desktops als auch auf Mobilgeräten

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

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

_{Wenn Sie in einigen Fällen sicherstellen müssen, dass Ihr Element wirklich sichtbar ist, wenn Sie auf das Dokument klicken: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

Würde so etwas nicht funktionieren?

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

});

oder

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

});

Anstatt jedes einzelne Klicken auf das DOM anzuhören, um ein bestimmtes Element auszublenden, können Sie tabindex auf das übergeordnete <div> setzen und die focusout -Ereignisse abhören.

Durch die Einstellung von tabindex wird sichergestellt, dass das Ereignis blur für <div> ausgelöst wird (normalerweise nicht).

Dein HTML würde also so aussehen:

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

Und dein JS:

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

Sogar Sleaker:

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

Aufbauend auf der großartigen Antwort von 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);
    }
  });
}

Dies fügt ein paar Dinge hinzu ...

1. Innerhalb einer Funktion mit einem Rückruf mit "unbegrenzten" Argumenten platziert
2. Es wurde ein Aufruf von .off () von jquery zusammen mit einem Ereignis-Namespace hinzugefügt, um das Ereignis vom Dokument zu lösen, sobald es ausgeführt wurde.
3. Enthaltenes Touchend für mobile Funktionen

Ich hoffe das hilft jemandem!

Und für Touch-Geräte wie IPAD und IPHONE können wir folgenden Code verwenden

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

Hier ist eine jsfiddle, die ich in einem anderen Thread gefunden habe und die auch mit dem Esc-Schlüssel funktioniert: 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()
      }
    })

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

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

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

Hängen Sie ein Klickereignis an Elemente der obersten Ebene außerhalb des Formularwrappers an. Beispiel:

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

Dies funktioniert auch auf Touch-Geräten. Stellen Sie jedoch sicher, dass Sie kein übergeordnetes Element von .form_wrapper in Ihre Auswahlliste aufnehmen.

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

p ist der Elementname. Wobei man auch die ID oder den Klassen- oder Elementnamen übergeben kann.

Geben Sie false zurück, wenn Sie auf .form_wrapper klicken:

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

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

(Fügen Sie einfach die Antwort von prc322 hinzu.)

In meinem Fall verwende ich diesen Code, um ein Navigationsmenü auszublenden, das angezeigt wird, wenn der Benutzer auf eine entsprechende Registerkarte klickt. Ich fand es nützlich, eine zusätzliche Bedingung hinzuzufügen, dass das Ziel des Klicks außerhalb des Containers nicht ein Link ist.

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

Dies liegt daran, dass einige der Links auf meiner Website der Seite neuen Inhalt hinzufügen. Wenn dieser neue Inhalt zur gleichen Zeit hinzugefügt wird, zu der das Navigationsmenü ausgeblendet wird, kann dies für den Benutzer verwirrend sein.

Kopiert von https://sdtuts.com/click-on-not-specified-element/

Live-Demo 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");
        }
    })
})

wenn Sie Probleme mit ios haben, funktioniert mouseup auf Apple Geräten nicht.

funktioniert mousedown/mouseup in jquery für das ipad?

ich benutze das:

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

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

ich habe es so gemacht:

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

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

}); 

GEIGE

So viele Antworten, muss ein Durchgangsrecht sein, um eine hinzugefügt zu haben ... Ich habe keine aktuellen (jQuery 3.1.1) Antworten gesehen - also:

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

Mit diesem Code können Sie so viele Elemente ausblenden, wie Sie möchten

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

Laut Dokumentation , .blur() funktioniert nicht nur mit dem Tag <input>. Zum Beispiel:

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

Schaltet zwischen normalen Geräten und Touch-Geräten um

Vor einiger Zeit habe ich hier einige Antworten gelesen und Code erstellt, den ich für Divs verwende, die als Popup-Blasen fungieren.

$('#openPopupBubble').click(function(){
    $('#popupBubble').toggle();

    if($('#popupBubble').css('display') === 'block'){
        $(document).bind('mousedown touchstart', function(e){
            if($('#openPopupBubble').is(e.target) || $('#openPopupBubble').find('*').is(e.target)){
                $(this).unbind(e);
            } 
            else if(!$('#popupBubble').find('*').is(e.target)){
                $('#popupBubble').hide();
                $(this).unbind(e);
            }
        });
    }
});

Sie können dies auch mithilfe von Klassen abstrakter gestalten und die richtige Popup-Blase basierend auf der Schaltfläche auswählen, die das Klickereignis ausgelöst hat.

$('body').on('click', '.openPopupBubble', function(){
    $(this).next('.popupBubble').toggle();

    if($(this).next('.popupBubble').css('display') === 'block'){
        $(document).bind('mousedown touchstart', function(e){
            if($(this).is(e.target) || $(this).find('*').is(e.target)){
                $(this).unbind(e);
            } 
            else if(!$(this).next('.popupBubble').find('*').is(e.target)){
                $(this).next('.popupBubble').hide();
                $(this).unbind(e);
            }
        });
    }
});

Ich habe über ein Suchfeld gearbeitet, das die automatische Vervollständigung anhand der verarbeiteten Keywords anzeigt. Wenn ich nicht auf eine Option klicken möchte, verwende ich den folgenden Code, um die verarbeitete Liste auszublenden, und es funktioniert.

$(document).click(function() {
 $('#suggestion-box').html("");
});

Suggestion-Box ist mein Autocomplete-Container, in dem die Werte angezeigt werden.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

Sie können ein Klickereignis an das Dokument binden, das das Dropdown-Menü verbirgt, wenn auf etwas außerhalb des Dropdown-Menüs geklickt wird, es jedoch nicht verbirgt, wenn auf etwas innerhalb des Dropdown-Menüs geklickt wird zeigt das Dropdown)

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

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

    });

Wenn Sie es dann ausblenden, lösen Sie das Klick-Ereignis

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

Diese Lösung sollte funktionieren, es ist ganz einfach:

jQuery(document).ready(function($) {
    jQuery(document).click(function(event) {
        if(typeof  jQuery(event.target).attr("class") != "undefined") {
            var classnottobeclickforclose = ['donotcountmeforclickclass1', 'donotcountmeforclickclass2','donotcountmeforclickclass3'];
            var arresult = jQuery.inArray(jQuery(event.target).attr("class"), classnottobeclickforclose);
            if (arresult < 0) {
                jQuery(".popup").hide();
            }
        }
    });
});

In der obigen Codeveränderung sollten donotcountmeforclickclass1, donotcountmeforclickclass2 usw. mit Klassen, die Sie zum Anzeigen von Popups verwendet haben, oder auf deren Klick-Popups keine Auswirkungen haben, sodass Sie definitiv die Klasse hinzufügen müssen, die Sie zum Öffnen von Popups verwenden.

Ändern Sie die Popup-Klasse mit der Popup-Klasse.