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.

jquery events event-bubbling

— Franek
sumber

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.

— Jeremy B.
sumber

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

  });
});

— TStamper
sumber

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.

— Ben Taylor
sumber

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>

— Tommy
sumber

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.

— Sandeep Pal
sumber

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.

— foxybagga.dll
sumber

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

— Nalan Madheswaran
sumber

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

— Renato Gama
sumber

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 ...

— Shaikh Arbaaz
sumber

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

— Hassan Sardar
sumber

2

$('html').click(function() {
//Hide the menus if it is visible
});

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

tetapi Anda perlu mengingat hal-hal ini juga. http://css-tricks.com/dangers-stopping-event-propagation/

— Muhammad Tahir
sumber

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/

— Bjoerg
sumber

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>

— Franek
sumber

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

— commonpike
sumber

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>

Luaskan cuplikan

— Ehsan KHAN
sumber

0

$( "element" ).focusout(function() {
    //your code on element
})

— Jafar Choupan
sumber

5

Meskipun kode ini dapat menyelesaikan pertanyaan, menyertakan penjelasan sangat membantu untuk meningkatkan kualitas posting Anda.

— Shree

-1

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

— mohammad gitipasand
sumber

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

— Model Super
sumber