Gunakan jQuery untuk menyembunyikan DIV ketika pengguna mengklik di luarnya

Saya menggunakan kode ini:

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

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

Dan HTML ini :

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

Masalahnya adalah saya memiliki tautan di dalamnya divdan kapan tautan itu tidak berfungsi lagi saat diklik.

Punya masalah yang sama, muncul dengan solusi mudah ini. Itu bahkan bekerja rekursif:

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

Anda sebaiknya pergi dengan sesuatu seperti ini:

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

Kode ini mendeteksi setiap peristiwa klik pada halaman dan kemudian menyembunyikan #CONTAINERelemen tersebut jika dan hanya jika elemen yang diklik bukanlah #CONTAINERelemen maupun salah satu dari turunannya.

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

Anda mungkin ingin memeriksa target acara klik yang menyala untuk tubuh alih-alih mengandalkan stopPropagation.

Sesuatu seperti:

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

Juga, elemen tubuh mungkin tidak termasuk seluruh ruang visual yang ditampilkan di browser. Jika Anda melihat bahwa klik Anda tidak mendaftar, Anda mungkin perlu menambahkan penangan klik untuk elemen HTML.

DEMO langsung

Periksa area klik tidak ada dalam elemen yang ditargetkan atau di dalamnya anak

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

MEMPERBARUI:

jQuery stop propagation adalah solusi terbaik

DEMO langsung

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

Memperbarui solusi untuk:

• gunakan mouseenter dan mouseleave sebagai gantinya
• dari hover gunakan live event binding

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

Solusi tanpa jQuery untuk jawaban paling populer :

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 langsung dengan ESCfungsionalitas

Bekerja di Desktop dan Mobile

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

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

_{Jika untuk beberapa kasus Anda perlu memastikan bahwa elemen Anda benar-benar terlihat ketika Anda mengklik pada dokumen: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

Bukankah hal seperti ini akan berhasil?

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

});

atau

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

});

Bahkan sleaker:

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

Alih-alih mendengarkan setiap klik pada DOM untuk menyembunyikan satu elemen tertentu, Anda dapat mengatur tabindexke orang tua <div>dan mendengarkan focusoutacara.

Pengaturan tabindexakan memastikan bahwa bluracara diaktifkan pada <div>(biasanya tidak).

Jadi HTML Anda akan terlihat seperti:

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

Dan JS Anda:

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

Dan untuk perangkat Touch seperti iPad dan IPHONE kita dapat menggunakan kode berikut

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

Inilah jsfiddle yang saya temukan di utas lain, bekerja dengan kunci esc juga: 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()
      }
    })

Dibangun dari jawaban mengagumkan 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);
    }
  });
}

Ini menambahkan beberapa hal ...

1. Ditempatkan dalam fungsi dengan panggilan balik dengan argumen "tidak terbatas"
2. Menambahkan panggilan ke .off () jquery yang dipasangkan dengan namespace acara untuk melepaskan ikatan acara dari dokumen setelah dijalankan.
3. Termasuk touchend untuk fungsionalitas seluler

Saya harap ini membantu seseorang!

jika Anda memiliki masalah dengan ios, mouseup tidak berfungsi pada perangkat apple.

apakah mousedown / mouseup di jquery berfungsi untuk ipad?

saya menggunakan ini:

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

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

(Hanya menambahkan jawaban prc322.)

Dalam kasus saya, saya menggunakan kode ini untuk menyembunyikan menu navigasi yang muncul ketika pengguna mengklik tab yang sesuai. Saya menemukan bermanfaat untuk menambahkan kondisi tambahan, bahwa target klik di luar wadah bukanlah tautan.

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

Ini karena beberapa tautan di situs saya menambahkan konten baru ke halaman. Jika konten baru ini ditambahkan pada saat yang sama ketika menu navigasi menghilang, itu mungkin membingungkan bagi pengguna.

Begitu banyak jawaban, harus menjadi hak lintas untuk menambahkan satu ... Saya tidak melihat jawaban saat ini (jQuery 3.1.1) - jadi:

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

padalah nama elemen. Di mana orang dapat melewati id atau nama kelas atau elemen juga.

Kembali salah jika Anda mengklik .form_wrapper:

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

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

Lampirkan acara klik ke elemen tingkat atas di luar pembungkus formulir, misalnya:

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

Ini juga akan berfungsi pada perangkat sentuh, pastikan Anda tidak menyertakan induk dari .form_wrapper dalam daftar pemilih Anda.

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

}); 

BIOLA

Disalin dari https://sdtuts.com/click-on-not-specified-element/

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

saya melakukannya seperti ini:

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

Dengan menggunakan kode ini Anda dapat menyembunyikan item sebanyak yang Anda inginkan

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

Yang dapat Anda lakukan adalah mengikat acara klik ke dokumen yang akan menyembunyikan dropdown jika sesuatu di luar dropdown diklik, tetapi tidak akan menyembunyikannya jika sesuatu di dalam dropdown diklik, sehingga acara "show" Anda (atau slidesown atau apa pun menunjukkan 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();
            }
        });

    });

Lalu ketika menyembunyikannya, batalkan ikatan acara klik

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

Menurut dokumen , .blur()berfungsi lebih dari sekadar <input>tag. Sebagai contoh:

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