Użyj jQuery, aby ukryć DIV, gdy użytkownik kliknie poza nim

Używam tego kodu:

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

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

A ten HTML :

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

Problem polega na tym, że mam linki wewnątrz divi kiedy przestają działać po kliknięciu.

Miałem ten sam problem, wymyśliłem to łatwe rozwiązanie. Działa nawet rekurencyjnie:

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

Lepiej skorzystaj z czegoś takiego:

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

Ten kod wykrywa każde zdarzenie kliknięcia na stronie, a następnie ukrywa #CONTAINERelement wtedy i tylko wtedy, gdy kliknięty element nie był ani #CONTAINERelementem, ani jednym z jego potomków.

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

Możesz chcieć sprawdzić cel zdarzenia kliknięcia, które uruchamia się dla ciała, zamiast polegać na stopPropagation.

Coś jak:

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

Ponadto element body może nie obejmować całej przestrzeni wizualnej pokazanej w przeglądarce. Jeśli zauważysz, że Twoje kliknięcia się nie rejestrują, może być konieczne dodanie modułu obsługi kliknięć dla elementu HTML.

DEMO na żywo

Sprawdź, czy obszar kliknięcia nie znajduje się w elemencie docelowym ani w jego elemencie potomnym

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

AKTUALIZACJA:

jQuery stop propagacja jest najlepszym rozwiązaniem

DEMO na żywo

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

Zaktualizowałem rozwiązanie do:

• zamiast tego użyj mouseenter i mouseleave
• najedź kursorem na powiązanie wydarzenia na żywo

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

Rozwiązanie bez jQuery dla najpopularniejszej odpowiedzi :

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

Demo na żywo z ESCfunkcjonalnością

Działa na komputerach i urządzeniach mobilnych

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

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

_{Jeśli w niektórych przypadkach musisz upewnić się, że element jest naprawdę widoczny po kliknięciu dokumentu: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

Czy coś takiego nie zadziałałoby?

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

});

lub

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

});

Nawet lepsza:

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

Zamiast słuchać każdego kliknięcia DOM, aby ukryć jeden konkretny element, możesz ustawić tabindexelement nadrzędny <div>i słuchaćfocusout zdarzeń.

Ustawienie tabindexupewni się, że blurzdarzenie zostanie uruchomione na<div> (normalnie nie będzie).

Twój HTML mógłby wyglądać następująco:

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

A twój JS:

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

W przypadku urządzeń dotykowych, takich jak IPAD i IPHONE, możemy użyć następującego kodu

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

Oto jsfiddle, który znalazłem w innym wątku, działa również z klawiszem 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()
      }
    })

Zbudowany z niesamowitej odpowiedzi 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);
    }
  });
}

To dodaje kilka rzeczy ...

1. Umieszczony w funkcji z wywołaniem zwrotnym z „nielimitowanymi” argumentami
2. Dodano wywołanie do .off () jquery sparowanego z przestrzenią nazw zdarzeń, aby odłączyć wydarzenie od dokumentu po jego uruchomieniu.
3. W zestawie touchend dla funkcji mobilnych

Mam nadzieję, że to komuś pomoże!

jeśli masz problemy z iOS, mouseup nie działa na urządzeniu Apple.

czy mousedown / mouseup w jquery działa na iPadzie?

używam tego:

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

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

(Tylko dodając do odpowiedzi prc322.)

W moim przypadku używam tego kodu, aby ukryć menu nawigacyjne, które pojawia się, gdy użytkownik kliknie odpowiednią kartę. Zauważyłem, że warto dodać dodatkowy warunek, że celem kliknięcia poza kontenerem nie jest link.

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

Wynika to z faktu, że niektóre linki w mojej witrynie dodają nową treść do strony. Jeśli ta nowa zawartość zostanie dodana w tym samym czasie, gdy zniknie menu nawigacji, może to być dezorientujące dla użytkownika.

Tak wiele odpowiedzi musi być prawem do przejścia, aby je dodać ... Nie widziałem aktualnych (jQuery 3.1.1) odpowiedzi - więc:

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

pto nazwa elementu. Gdzie można przekazać także identyfikator, nazwę klasy lub elementu.

Zwróć false, jeśli klikniesz .form_wrapper:

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

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

Dołącz zdarzenie click do elementów najwyższego poziomu poza opakowaniem formularza, na przykład:

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

Działa to również na urządzeniach dotykowych, upewnij się tylko, że na liście selektorów nie ma elementu nadrzędnego .form_wrapper.

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

}); 

SKRZYPCE

Skopiowano z https://sdtuts.com/click-on-not-specified-element/

Demo na żywo 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");
        }
    })
})

zrobiłem to tak:

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

Korzystając z tego kodu, możesz ukryć dowolną liczbę pozycji

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

Możesz powiązać zdarzenie kliknięcia z dokumentem, który ukryje menu rozwijane, jeśli klikniesz coś poza menu rozwijanym, ale nie ukryje go, jeśli klikniesz coś w menu rozwijanym, więc Twoje zdarzenie „pokaż” (lub pokaz slajdów lub cokolwiek innego pokazuje menu rozwijane)

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

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

    });

Następnie, ukrywając to, odznacz zdarzenie kliknięcia

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

Zgodnie z docs , .blur()działa dłużej niż <input>tagu. Na przykład:

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