Pertanyaan Gunakan jQuery untuk menyembunyikan DIV saat 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 dalam DIV dan ketika mereka tidak lagi bekerja ketika diklik.


855
2017-09-10 06:11


asal


Jawaban:


Punya masalah yang sama, muncul dengan solusi mudah ini. Ini 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();
    }
});

2261
2017-09-12 09:19



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

194
2017-09-10 06:23



Anda mungkin ingin memeriksa target peristiwa klik yang diaktifkan untuk tubuh alih-alih mengandalkan stopPropagation.

Sesuatu seperti:

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

Selain itu, elemen bodi mungkin tidak menyertakan seluruh ruang visual yang ditunjukkan di browser. Jika Anda memperhatikan bahwa klik Anda tidak terdaftar, Anda mungkin perlu menambahkan penangan klik untuk elemen HTML sebagai gantinya.


64
2017-09-10 06:20



Kode ini mendeteksi setiap peristiwa klik pada halaman dan kemudian menyembunyikannya #CONTAINER elemen jika dan hanya jika elemen yang diklik bukan #CONTAINER elemen atau salah satu keturunannya.

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

62
2018-05-09 20:13



Live DEMO

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

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

MEMPERBARUI:

jQuery berhenti propagasi adalah solusi terbaik

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



Memperbarui solusi untuk:

  • gunakan mouseenter dan mouseleave sebagai gantinya
  • dari hover menggunakan pengikatan acara langsung

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



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


10
2017-07-27 12:40



Demo langsung dengan ESC fungsionalitas

Bekerja pada keduanya Desktop dan Seluler

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


7
2017-09-15 20:57



Bukankah hal seperti ini akan berhasil?

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

});

atau

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

});

6
2018-01-26 22:56