Bagaimana saya bisa memicu suatu fungsi ketika saya mengklik di manapun pada halaman saya kecuali pada satu div ( id=menu_content
)?
Bagaimana saya bisa memicu suatu fungsi ketika saya mengklik di manapun pada halaman saya kecuali pada satu div ( id=menu_content
)?
Jawaban:
Anda dapat menerapkan click
pada body
dokumen dan membatalkan click
pemrosesan jika click
acara dihasilkan oleh div dengan id menu_content
, Ini akan mengikat acara ke satu elemen dan menyimpan pengikatan click
dengan setiap elemen kecualimenu_content
$('body').click(function(evt){
if(evt.target.id == "menu_content")
return;
//For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
if($(evt.target).closest('#menu_content').length)
return;
//Do processing of click event here for every element except with id menu_content
});
closest
dimulai dengan elemen saat ini, ia menangani klik menu_content
, serta klik pada turunan. Saya pikir yang kedua if
adalah yang Anda butuhkan.
Lihat dokumentasi untuk jQuery Event Target . Dengan menggunakan properti target objek peristiwa, Anda dapat mendeteksi asal klik dalam #menu_content
elemen dan, jika demikian, menghentikan handler klik lebih awal. Anda harus menggunakan .closest()
untuk menangani kasus di mana klik berasal dari turunan #menu_content
.
$(document).click(function(e){
// Check if click was triggered on or within #menu_content
if( $(e.target).closest("#menu_content").length > 0 ) {
return false;
}
// Otherwise
// trigger your click function
});
coba ini
$('html').click(function() {
//your stuf
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
Anda juga bisa menggunakan acara luar
Saya tahu bahwa pertanyaan ini telah terjawab, Dan semua jawabannya bagus. Tetapi saya ingin menambahkan dua sen saya ke pertanyaan ini untuk orang-orang yang memiliki masalah serupa (tapi tidak persis sama).
Secara lebih umum, kita dapat melakukan sesuatu seperti ini:
$('body').click(function(evt){
if(!$(evt.target).is('#menu_content')) {
//event handling code
}
});
Dengan cara ini kita tidak hanya dapat menangani peristiwa yang dipicu oleh apa pun kecuali elemen dengan id menu_content
tetapi juga peristiwa yang dipicu oleh apa pun kecuali elemen apa pun yang dapat kita pilih menggunakan pemilih CSS.
Misalnya dalam cuplikan kode berikut saya mendapatkan peristiwa yang dipicu oleh elemen apa pun kecuali semua <li>
elemen yang merupakan turunan dari elemen div dengan id myNavbar
.
$('body').click(function(evt){
if(!$(evt.target).is('div#myNavbar li')) {
//event handling code
}
});
inilah yang saya lakukan. ingin memastikan saya bisa mengklik salah satu anak di datepicker saya tanpa menutupnya.
$('html').click(function(e){
if (e.target.id == 'menu_content' || $(e.target).parents('#menu_content').length > 0) {
// clicked menu content or children
} else {
// didnt click menu content
}
});
kode saya yang sebenarnya:
$('html').click(function(e){
if (e.target.id != 'datepicker'
&& $(e.target).parents('#datepicker').length == 0
&& !$(e.target).hasClass('datepicker')
) {
$('#datepicker').remove();
}
});