Kullanıcı dışına tıkladığında DIV'yi gizlemek için jQuery kullanma

Bu kodu kullanıyorum:

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

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

Ve bu HTML :

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

Sorun ben içinde divtıkladığında ve artık çalışmıyor bağlantıları içinde olmasıdır .

Aynı sorun vardı, bu kolay çözüm ortaya çıktı. Hatta özyinelemeli çalışıyor:

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

Böyle bir şey yapsan iyi olur:

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

Bu kod, sayfadaki herhangi bir tıklama olayını algılar #CONTAINERve yalnızca tıklatılan #CONTAINERöğenin ne öğesi ne de onun alt öğelerinden biri olması durumunda öğeyi gizler .

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

StopPropagation öğesine güvenmek yerine gövde için tetiklenen tıklama etkinliğinin hedefini kontrol etmek isteyebilirsiniz.

Gibi bir şey:

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

Ayrıca, gövde öğesi tarayıcıda gösterilen tüm görsel alanı içermeyebilir. Tıklamalarınızın kaydedilmediğini fark ederseniz, bunun yerine HTML öğesi için tıklama işleyicisini eklemeniz gerekebilir.

Canlı DEMO

Tıklama alanının hedeflenen öğede veya alt öğede olmadığını kontrol edin

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

GÜNCELLEME:

jQuery stop yayılımı en iyi çözümdür

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

Çözüm güncellendi:

• bunun yerine mouseenter ve mouseleave kullanın
• fareyle üzerine gelindiğinde canlı olay bağlama kullanma

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

En popüler cevap için jQuery'siz bir çözüm :

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

ESCİşlevselliğe sahip canlı demo

Hem Masaüstü hem de Mobil Cihazlarda Çalışır

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

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

_{Bazı durumlarda, dokümanı tıkladığınızda öğenizin gerçekten görünür olduğundan emin olmanız gerekiyorsa: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

Böyle bir şey olmaz mı?

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

});

veya

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

});

Hatta daha ince:

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

Belirli bir öğeyi gizlemek için DOM üzerindeki her bir tıklamayı dinlemek yerine tabindex, üst öğeye ayarlayabilir <div>ve focusoutetkinlikleri dinleyebilirsiniz .

Ayarlama tabindex, bluretkinliğin tetiklendiğinden emin <div>olur (normalde gerçekleşmez).

Böylece HTML'niz şöyle görünecektir:

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

Ve JS'niz:

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

IPAD ve IPHONE gibi Dokunmatik cihazlar için aşağıdaki kodu kullanabiliriz

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

İşte başka bir iş parçacığında bulduğum bir jsfiddle, esc anahtarı ile de çalışıyor: 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()
      }
    })

Prc322'nin müthiş cevabından oluşturuldu.

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

Bu birkaç şey ekliyor ...

1. "Sınırsız" bağımsız değişkenlere sahip bir geri çağrı bulunan bir işlev içine yerleştirilir
2. Jquery'nin .off () öğesine, olay çalıştırıldıktan sonra olayı belgeden ayırmak için bir olay ad alanı ile eşleştirilmiş bir çağrı eklendi.
3. Mobil işlevler için dahil dokunmatik ekran

Umarım bu birine yardımcı olur!

ios ile sorun yaşıyorsanız, mouseup elma cihazında çalışmıyor.

moquown / mouseup jquery ipad için çalışır?

Bunu kullanıyorum:

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

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

(Sadece prc322'nin cevabına ekliyoruz.)

Benim durumumda, kullanıcı uygun bir sekmeyi tıklattığında görünen bir gezinme menüsünü gizlemek için bu kodu kullanıyorum. Kapsayıcı dışındaki tıklamanın hedefinin bir bağlantı olmadığı ekstra bir koşul eklemenin yararlı olduğunu buldum .

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

Bunun nedeni, sitemdeki bazı bağlantıların sayfaya yeni içerik eklemesidir. Bu yeni içerik, navigasyon menüsünün kaybolmasıyla aynı zamanda eklenirse, kullanıcı için yönünü kötüleştirebilir.

Pek çok cevap, bir tane eklemek için bir geçiş hakkı olmalı ... Geçerli (jQuery 3.1.1) cevapları görmedim - yani:

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

pöğe adıdır. Burada kimlik veya sınıf veya öğe adı da geçebilir.

.Form_wrapper öğesini tıklatırsanız false değerini döndürün:

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

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

Form sarmalayıcı dışındaki en üst düzey öğelere bir tıklama etkinliği ekleyin, örneğin:

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

Bu aynı zamanda dokunmatik cihazlarda da çalışır, seçiciler listenize .form_wrapper öğesinin üst öğesini eklemediğinizden emin olun.

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

}); 

VAKTİNİ BOŞA HARCAMAK

Https://sdtuts.com/click-on-not-specified-element/ adresinden kopyalandı

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

ben böyle yaptım:

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

Bu kodu kullanarak istediğiniz kadar öğe gizleyebilirsiniz

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

Yapabileceğiniz şey, açılır menü dışındaki bir şey tıklandığında açılır listeyi gizleyen belgeye bir tıklama etkinliği bağlamaktır, ancak açılır menüdeki bir şey tıklandığında gizlenmez, bu nedenle "göster" etkinliğiniz (veya slayt gösterisi veya açılır listeyi gösterir)

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

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

    });

Ardından gizlerken tıklama etkinliğini çözün

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

Docs göre , .blur()daha uzun süre çalışır <input>etiketi. Örneğin:

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