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 div
dan kapan tautan itu tidak berfungsi lagi saat diklik.
$('html')
atau$(document)
akan lebih baik daripada$('body')
Jawaban:
Punya masalah yang sama, muncul dengan solusi mudah ini. Itu bahkan bekerja rekursif:
sumber
$("YOUR CONTAINER SELECTOR").unbind( 'click', clickDocument );
tepat di samping.hide()
. Jadidocument
jangan terus mendengarkan klik.$(document).on("mouseup.hideDocClick", function () { ... });
di fungsi yang membuka wadah, dan$(document).off('.hideDocClick');
pada fungsi sembunyikan. Menggunakan ruang nama Saya tidak menghapusmouseup
pendengar lain yang mungkin dilampirkan pada dokumen.Anda sebaiknya pergi dengan sesuatu seperti ini:
sumber
hover
pengendali acara, yang membuka banyak kemungkinan.(function() { // ... code })();
Saya tidak ingat nama dari pola ini, tetapi sangat berguna! Semua variabel Anda yang dideklarasikan akan berada di dalam fungsi dan tidak akan mencemari namespace global.Kode ini mendeteksi setiap peristiwa klik pada halaman dan kemudian menyembunyikan
#CONTAINER
elemen tersebut jika dan hanya jika elemen yang diklik bukanlah#CONTAINER
elemen maupun salah satu dari turunannya.sumber
Anda mungkin ingin memeriksa target acara klik yang menyala untuk tubuh alih-alih mengandalkan stopPropagation.
Sesuatu seperti:
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.
sumber
e.stopPropagation();
jika Anda memiliki pendengar klik lainform_wrapper
ketika Anda mengklik salah satu dari anak-anaknya, yang bukan perilaku yang diinginkan. Gunakan jawaban prc322 sebagai gantinya.DEMO langsung
Periksa area klik tidak ada dalam elemen yang ditargetkan atau di dalamnya anak
MEMPERBARUI:
jQuery stop propagation adalah solusi terbaik
DEMO langsung
sumber
clicked
satu. Jika tidak, itustopPropagation
akan memungkinkan beberapa dropdown terbuka pada saat yang sama.sumber
Memperbarui solusi untuk:
var mouseOverActiveElement = false;
sumber
.live
sekarang sudah ditinggalkan ; gunakan.on
saja.Solusi tanpa jQuery untuk jawaban paling populer :
MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains
sumber
bind
tidak ada yang berhasil. Bisakah Anda memperbaiki fungsi untuk membuatnya berfungsi?Demo langsung dengan ESCfungsionalitas
Bekerja di Desktop dan Mobile
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();
sumber
Bukankah hal seperti ini akan berhasil?
atau
sumber
.form_wrapper
ketika Anda mengklik anak-anaknya (di antara masalah lain).Bahkan sleaker:
sumber
.wrapper
mana pun Anda mengklik pada halaman, yang bukan apa yang diminta.Alih-alih mendengarkan setiap klik pada DOM untuk menyembunyikan satu elemen tertentu, Anda dapat mengatur
tabindex
ke orang tua<div>
dan mendengarkanfocusout
acara.Pengaturan
tabindex
akan memastikan bahwablur
acara diaktifkan pada<div>
(biasanya tidak).Jadi HTML Anda akan terlihat seperti:
Dan JS Anda:
sumber
Dan untuk perangkat Touch seperti iPad dan IPHONE kita dapat menggunakan kode berikut
sumber
Inilah jsfiddle yang saya temukan di utas lain, bekerja dengan kunci esc juga: http://jsfiddle.net/S5ftb/404
sumber
Dibangun dari jawaban mengagumkan prc322.
Ini menambahkan beberapa hal ...
Saya harap ini membantu seseorang!
sumber
jika Anda memiliki masalah dengan ios, mouseup tidak berfungsi pada perangkat apple.
apakah mousedown / mouseup di jquery berfungsi untuk ipad?
saya menggunakan ini:
sumber
(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.
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.
sumber
Begitu banyak jawaban, harus menjadi hak lintas untuk menambahkan satu ... Saya tidak melihat jawaban saat ini (jQuery 3.1.1) - jadi:
sumber
sumber
p
adalah nama elemen. Di mana orang dapat melewati id atau nama kelas atau elemen juga.sumber
Kembali salah jika Anda mengklik .form_wrapper:
sumber
Lampirkan acara klik ke elemen tingkat atas di luar pembungkus formulir, misalnya:
Ini juga akan berfungsi pada perangkat sentuh, pastikan Anda tidak menyertakan induk dari .form_wrapper dalam daftar pemilih Anda.
sumber
BIOLA
sumber
sumber
Disalin dari https://sdtuts.com/click-on-not-specified-element/
Demo langsung http://demos.sdtuts.com/click-on-specified-element
sumber
saya melakukannya seperti ini:
sumber
sumber
Dengan menggunakan kode ini Anda dapat menyembunyikan item sebanyak yang Anda inginkan
sumber
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)
Lalu ketika menyembunyikannya, batalkan ikatan acara klik
sumber
Menurut dokumen ,
.blur()
berfungsi lebih dari sekadar<input>
tag. Sebagai contoh:sumber
div
tidak pernah blur - blur even bahkan tidak bisa keluar dari anak-anak mereka. Akhirnya, bahkan jika di atas tidak benar, ini hanya akan berfungsi jika Anda memastikan bahwa.form_wrapper
itu dalam fokus sebelum pengguna mematikannya.