¿Cómo puedo activar una función cuando hago clic en cualquier lugar de mi página excepto en un div ( id=menu_content
)?
¿Cómo puedo activar una función cuando hago clic en cualquier lugar de mi página excepto en un div ( id=menu_content
)?
Respuestas:
Puede aplicar click
un body
documento y cancelar el click
procesamiento si el click
evento es generado por div con id.Esto menu_content
vinculará el evento a un solo elemento y ahorrará el enlace click
con 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
});
closest
comienza con el elemento actual, maneja hacer clic en menu_content
, así como hacer clic en descendientes. Creo que el segundo if
es 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_content
elemento 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
});
prueba esto
$('html').click(function() {
//your stuf
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
también puedes usar los eventos externos
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_content
sino 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 id myNavbar
.
$('body').click(function(evt){
if(!$(evt.target).is('div#myNavbar li')) {
//event handling code
}
});
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();
}
});