jQuery haga clic en cualquier lugar de la página excepto en 1 div

Respuestas:

142

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

});
Adil
fuente
3
¿Qué pasa con los hijos descendientes en el DIV?
iKamy
2
Podemos usar más cercano para verificar la fuente del evento tiene cualquier ancestro con id menu_content como if ($ (evt.target) .closest ('# menu_content'). Length) retrun; revisa mi respuesta actualizada.
Adil
Dado que closestcomienza con el elemento actual, maneja hacer clic en menu_content, así como hacer clic en descendientes. Creo que el segundo ifes todo lo que necesitas.
goodeye
50

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
});
Nbrooks
fuente
42

prueba esto

 $('html').click(function() {
 //your stuf
 });

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

también puedes usar los eventos externos

Database_Query
fuente
5
Este trabajo, pero el uso de event.stopPropagation () puede tener efectos en otros JS contenidos en el padre.
Edd Smith
9

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

$('body').click(function(evt){    
    if(!$(evt.target).is('div#myNavbar li')) {
        //event handling code
    }
});
Gandalf
fuente
1
Solo quería decir que este método me funcionó bien, usé .is () y también .closest () con un selector css que no tenía ID, pero solo algunas clases gracias
relipse
7

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();
    }
});
Nate
fuente
Buena versión que incluye clics en los niños y la clase, ¡debería ser la respuesta elegida!
rAthus