¿Cómo puedo activar una función cuando hago clic en cualquier lugar de mi página excepto en un div ( id=menu_content)?
88
Puede aplicar clickun bodydocumento y cancelar el clickprocesamiento si el clickevento es generado por div con id.Esto menu_contentvinculará el evento a un solo elemento y ahorrará el enlace clickcon cada elemento exceptomenu_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
});
closestcomienza con el elemento actual, maneja hacer clic enmenu_content, así como hacer clic en descendientes. Creo que el segundoifes todo lo que necesitas.Consulte la documentación de jQuery Event Target . Con la propiedad de destino del objeto de evento, puede detectar dónde se originó el clic dentro del
#menu_contentelemento y, de ser así, terminar el controlador de clic antes. Tendrá que usar.closest()para manejar los casos en los que el clic se originó en un descendiente de#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 });fuente
prueba esto
$('html').click(function() { //your stuf }); $('#menucontainer').click(function(event){ event.stopPropagation(); });también puedes usar los eventos externos
fuente
Sé que esta pregunta ha sido respondida, y todas las respuestas son agradables. Pero quería agregar mis dos centavos a esta pregunta para las personas que tienen un problema similar (pero no exactamente el mismo).
De una manera más general, podemos hacer algo como esto:
$('body').click(function(evt){ if(!$(evt.target).is('#menu_content')) { //event handling code } });De esta manera podemos manejar no solo los eventos disparados por cualquier cosa excepto el elemento con id,
menu_contentsino también los eventos disparados por cualquier cosa excepto cualquier elemento que podamos seleccionar usando selectores CSS.Por ejemplo, en el siguiente fragmento de código, obtengo eventos activados por cualquier elemento, excepto todos los
<li>elementos que son descendientes del elemento div con idmyNavbar.$('body').click(function(evt){ if(!$(evt.target).is('div#myNavbar li')) { //event handling code } });fuente
Aquí esta lo que hice. Quería asegurarme de que podía hacer clic en cualquiera de los elementos secundarios de mi selector de fechas sin cerrarlo.
$('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 } });mi código real:
$('html').click(function(e){ if (e.target.id != 'datepicker' && $(e.target).parents('#datepicker').length == 0 && !$(e.target).hasClass('datepicker') ) { $('#datepicker').remove(); } });fuente