Bagaimana cara menyembunyikan elemen pada event klik di manapun di luar elemen?


121

Saya ingin tahu apakah ini cara yang benar untuk menyembunyikan elemen yang terlihat saat diklik di mana pun pada halaman.

$(document).click(function (event) {            
    $('#myDIV:visible').hide();
});

Elemen (div, span, dll.) Tidak boleh hilang saat peristiwa klik terjadi dalam batas-batas elemen.

Jawaban:


204

Jika saya mengerti, Anda ingin menyembunyikan div saat Anda mengklik di mana saja kecuali div, dan jika Anda mengklik saat di atas div, maka sebaiknya TIDAK ditutup. Anda dapat melakukannya dengan kode ini:

$(document).click(function() {
    alert("me");
});
$(".myDiv").click(function(e) {
    e.stopPropagation(); // This is the preferred method.
    return false;        // This should not be used unless you do not want
                         // any click events registering inside the div
});

Ini mengikat klik ke seluruh halaman, tetapi jika Anda mengklik div tersebut, itu akan membatalkan acara klik.


1
Ini berfungsi dengan baik .. tetapi Ketika saya mengklik tombol yang memanggil popup, maka popup datang dan sekali lagi menghilang dengan segera. Apa yang harus dilakukan untuk itu karena dokumen mengambil dua tindakan sekaligus. untuk memanggil popup pada klik tubuh dan untuk fadeOut popup pada bodyClick
Veer Shrivastav

@VeerShrivastav sama terjadi di sini. e.stopPropagation (); akan menghentikan semua penangan klik
brunodd

Ini TIDAK akan berfungsi di Safari jika Anda memiliki elemen lain di dalam .myDivelemen. Misalnya, jika Anda memiliki dropdown pilih di dalam .myDiv. Ketika Anda mengklik pilih, itu akan mengira Anda mengklik di luar kotak.
CodeGodie

24

Coba ini

 $('.myDiv').click(function(e) { //button click class name is myDiv
  e.stopPropagation();
 })

 $(function(){
  $(document).click(function(){  
  $('.myDiv').hide(); //hide the button

  });
});

Saya menggunakan nama kelas, bukan ID , karena di asp.net Anda harus khawatir tentang hal-hal ekstra yang dilampirkan .net ke id

EDIT- Karena Anda menambahkan bagian lain, itu akan berfungsi seperti ini:

 $('.myDiv').click(function() { //button click class name is myDiv
  e.stopPropagation();
 })

 $(function(){
  $('.openDiv').click(function() {
  $('.myDiv').show(); 

  });
  $(document).click(function(){  
  $('.myDiv').hide(); //hide the button

  });
});

22

Mulai jQuery 1.7, ada cara baru untuk menangani acara. Saya pikir saya akan menjawab di sini hanya untuk menunjukkan bagaimana saya bisa melakukan ini dengan cara "baru". Jika belum, saya sarankan Anda membaca dokumen jQuery untuk metode "on" .

var handler = function(event){
  // if the target is a descendent of container do nothing
  if($(event.target).is(".container, .container *")) return;

  // remove event handler from document
  $(document).off("click", handler);

  // dostuff
}

$(document).on("click", handler);

Di sini kami menyalahgunakan penyeleksi jQuery dan acara menggelegak. Perhatikan bahwa saya memastikan saya membersihkan event handler setelahnya. Anda dapat mengotomatiskan perilaku ini dengan $('.container').one( lihat: docs ) tetapi karena kita perlu melakukan kondisi dalam handler yang tidak dapat diterapkan di sini.


13

Contoh kode berikut tampaknya bekerja paling baik untuk saya. Meskipun Anda bisa menggunakan 'return false' yang menghentikan semua penanganan peristiwa itu untuk div atau turunannya. Jika Anda ingin memiliki kontrol pada div pop-up (formulir login pop-up misalnya), Anda perlu menggunakan event.stopPropogation ().

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <a id="link" href="#">show box</a>
    <div id="box" style="background: #eee; display: none">
        <p>a paragraph of text</p>
        <input type="file"  />
    </div>

    <script src="jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
        var box = $('#box');
        var link = $('#link');

        link.click(function() {
            box.show(); return false;
        });

        $(document).click(function() {
            box.hide();
        });

        box.click(function(e) {
            e.stopPropagation();
        });

    </script>
</body>
</html>

6

Terima kasih, Thomas. Saya baru mengenal JS dan saya telah mencari solusi untuk masalah saya. Salam membantu.

Saya telah menggunakan jquery untuk membuat kotak Login yang meluncur ke bawah. Untuk pengalaman pengguna terbaik, saya memutuskan untuk menghilangkan kotak ketika pengguna mengklik di suatu tempat kecuali kotak. Saya agak malu menggunakan sekitar empat jam untuk memperbaiki ini. Tapi, hei, saya baru mengenal JS.

Mungkin kode saya dapat membantu seseorang:

<body>
<button class="login">Logg inn</button>
<script type="text/javascript">

    $("button.login").click(function () {
        if ($("div#box:first").is(":hidden")) {
                $("div#box").slideDown("slow");} 
            else {
                $("div#box").slideUp("slow");
                }
    });
    </script>
<div id="box">Lots of login content</div>

<script type="text/javascript">
    var box = $('#box');
    var login = $('.login');

    login.click(function() {
        box.show(); return false;
    });

    $(document).click(function() {
        box.hide();
    });

    box.click(function(e) {
        e.stopPropagation();
    });

</script>

</body>

5

Yang juga bisa Anda lakukan adalah:

$(document).click(function (e)
{

  var container = $("div");

   if (!container.is(e.target) && container.has(e.target).length === 0)
  {
 container.fadeOut('slow');

   }

});

Jika target Anda bukan div maka sembunyikan div dengan memeriksa panjangnya sama dengan nol.


5

Saya melakukan yang di bawah ini. Berpikir untuk berbagi agar orang lain juga bisa mendapatkan keuntungan.

$("div#newButtonDiv").click(function(){
    $(this).find("ul.sub-menu").css({"display":"block"});

    $(this).click(function(event){
        event.stopPropagation();
        $("html").click(function(){
            $(this).find("ul.sub-menu").css({"display":"none"});
        }
    });
});

Beri tahu saya jika saya dapat membantu seseorang dalam hal ini.


Kode bagus dan tidak dijalankan jika div#newButtonDivtidak diklik. Saya akan merekomendasikan Anda menghapus yang kedua .click()pada baris 4 (jika Anda melakukan ini, ingatlah untuk menghapus kurung kurawal, dan titik koma - baris 9).
aullah

4

Coba ini:

 $(document).mouseup(function (e) {
    var div = $("#yourdivid");
    if (!div.is(e.target) && div.has(e.target).length === 0) 
    {
       div.hide();
     }
    });

3

Cara lain untuk menyembunyikan div kontainer saat klik terjadi di elemen bukan turunan;

$(document).on('click', function(e) {
    if(!$.contains($('.yourContainer').get(0), e.target)) {
        $('.yourContainer').hide();
    }
});

3
  $(document).on('click', function(e) { // Hides the div by clicking any where in the screen
        if ( $(e.target).closest('#suggest_input').length ) {
            $(".suggest_div").show();
        }else if ( ! $(e.target).closest('.suggest_container').length ) {
            $('.suggest_div').hide();
        }
    });

Di sini #suggest_input in adalah nama kotak teks dan .suggest_container adalah nama kelas ul dan .suggest_div adalah elemen div utama untuk saran otomatis saya.

kode ini untuk menyembunyikan elemen div dengan mengklik di mana saja di layar. Sebelum melakukan semuanya, harap pahami kode dan salin ...


2

Coba ini, ini bekerja sempurna untuk saya.

$(document).mouseup(function (e)
{
    var searchcontainer = $("#search_container");

    if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
        && searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
    {
        searchcontainer.hide();
    }
});


2

Berikut adalah solusi CSS / JS kecil yang berfungsi berdasarkan jawaban Sandeep Pal:

$(document).click(function (e)
{
  if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
  {
   $("#menu-toggle3").prop('checked', false);
  }
});

Cobalah dengan mengeklik kotak centang lalu di luar menu:

https://jsfiddle.net/qo90txr8/


1

Ini tidak berhasil - ini menyembunyikan .myDIV saat Anda mengeklik di dalamnya.

$('.openDiv').click(function(e) {
$('.myDiv').show(); 
e.stopPropagation();
})

$(document).click(function(){  
$('.myDiv').hide(); 

});

});

<a class="openDiv">DISPLAY DIV</a>

<div class="myDiv">HIDE DIV</div>

jadi Anda ingin div ditampilkan untuk menunjukkan kapan tautan ditempatkan, lalu ambil e.stopPropa itu .. keluar dari sana dan ikuti opsi saya
TStamper

1

Hanya 2 perbaikan kecil untuk saran di atas:

  • lepaskan document.click setelah selesai
  • hentikan propagasi pada peristiwa yang memicu ini, dengan asumsi itu klik

    jQuery(thelink).click(function(e){
        jQuery(thepop).show();
    
        // bind the hide controls
        var jpop=jQuery(thepop);
        jQuery(document).bind("click.hidethepop", function() {
                jpop.hide();
                // unbind the hide controls
                jQuery(document).unbind("click.hidethepop");
        });
        // dont close thepop when you click on thepop
        jQuery(thepop).click(function(e) {
            e.stopPropagation();
        });
        // and dont close thepop now 
        e.stopPropagation();
    });

1

$(document).ready(function(){

$("button").click(function(){
   
       
        $(".div3").toggle(1000);
    });
   $("body").click(function(event) {
   if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
       $(".div3").hide(1000);}
    }); 
   
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>

<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>



-1
$(document).mouseup(function (e)
{
    var mydiv = $('div#mydiv');
    if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
       search.slideUp();
    }
});

-1

Solusi Sederhana: sembunyikan elemen pada acara klik di mana saja di luar beberapa elemen tertentu.

$(document).on('click', function () {
                $('.element').hide();
            });
            //element will not Hide on click some specific control inside document
            $('.control-1').on('click', function (e) {
                e.stopPropagation();
            });
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.