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


Ich benutze diesen Code:

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

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

Und dieses 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 des DIV habe und wenn sie nicht mehr funktionieren, wenn sie geklickt werden.


855
2017-09-10 06:11


Ursprung


Antworten:


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

2261
2017-09-12 09:19



Du solltest besser mit so etwas gehen:

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

194
2017-09-10 06:23



Möglicherweise möchten Sie das Ziel des Klickereignisses überprüfen, das für den Körper 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 kann das Körperelement nicht den gesamten im Browser angezeigten visuellen Raum enthalten. Wenn Sie feststellen, dass Ihre Klicks nicht registriert werden, müssen Sie möglicherweise stattdessen den Click-Handler für das HTML-Element hinzufügen.


64
2017-09-10 06:20



Dieser Code erkennt jedes Klickereignis auf der Seite und blendet dann das #CONTAINER Element wenn und nur wenn das angeklickte Element weder das #CONTAINER Element noch einer seiner Nachkommen.

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

62
2018-05-09 20:13



Live-Demo

Überprüfen Sie, ob sich der Klickbereich nicht im Zielelement oder in seinem Kind 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();
});

22
2018-04-29 08:28



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

17
2017-09-10 06:39



Die Lösung wurde aktualisiert auf:

  • Verwenden Sie stattdessen mouseenter und mouseleave
  • von 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');
    }
});

15
2018-04-27 14:32



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


10
2017-07-27 12:40



Live-Demo mit ESC Funktionalität

Funktioniert auf beiden Desktop und Mobil

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 einem bestimmten Fall sicher sein müssen, dass Ihr Element wirklich sichtbar ist, wenn Sie auf das Dokument klicken: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();


7
2017-09-15 20:57