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

Ich benutze diesen Code:

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

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

Und dieser HTML :

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

Das Problem ist, dass ich Links innerhalb der habe divund wenn sie beim Klicken nicht mehr funktionieren.

Hatte das gleiche Problem, kam mit dieser einfachen Lösung. Es funktioniert sogar rekursiv:

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

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 jedes Klickereignis auf der Seite und blendet das #CONTAINERElement nur dann aus, wenn das angeklickte Element weder das #CONTAINERElement noch einer 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 Klickereignisses überprüfen, das für den Body ausgelöst wird, anstatt sich auf stopPropagation zu verlassen.

Etwas wie:

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

Außerdem enthält das Körperelement 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 in seinem untergeordneten Element befindet

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

AKTUALISIEREN:

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:

• Verwenden Sie stattdessen Mouseenter und Mouseleave
• Hover verwenden 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 ESCFunktionalität

Funktioniert sowohl auf dem Desktop als auch auf dem Handy

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() {

});

Noch schlanker:

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

Anstatt jeden einzelnen Klick auf das DOM anzuhören, um ein bestimmtes Element auszublenden, können Sie tabindexdas übergeordnete Element festlegen <div>und die focusoutEreignisse anhören .

Durch die Einstellung tabindexwird sichergestellt, dass das blurEreignis auf dem ausgelöst wird <div>(normalerweise nicht).

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

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

Erbaut aus der fantastischen 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. Platziert in einer Funktion mit einem Rückruf mit "unbegrenzten" Argumenten
2. Es wurde ein Aufruf von .off () von jquery in Verbindung mit einem Ereignis-Namespace hinzugefügt, um das Ereignis nach seiner Ausführung vom Dokument zu trennen.
3. Inklusive Touchend für mobile Funktionen

Ich hoffe das hilft jemandem!

Wenn Sie Probleme mit iOS haben, funktioniert mouseup auf einem Apple-Gerät 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();
          }
      });

(Nur zur Antwort von prc322 hinzufügen.)

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 kein 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 gleichzeitig mit dem Verschwinden des Navigationsmenüs hinzugefügt wird, kann dies für den Benutzer verwirrend sein.

So viele Antworten müssen 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();
    });
});

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

pist der Elementname. Wo 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 ein Klickereignis an Elemente der obersten Ebene außerhalb des Formular-Wrappers hinzu, z. B.:

$('#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.

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

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

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

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

Sie können ein Klickereignis an das Dokument binden, das die Dropdown-Liste ausblendet, wenn auf etwas außerhalb der Dropdown-Liste geklickt wird. Es wird jedoch nicht ausgeblendet, wenn auf etwas innerhalb der Dropdown-Liste 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();
            }
        });

    });

Binden Sie dann beim Ausblenden das Klickereignis auf

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

Nach der docs , .blur()arbeitet für mehr als den <input>Tag. Zum Beispiel:

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