Documento, haga clic en no en los elementos jQuery

Question

Usando jQuery, ¿cómo se detectan los clics no en elementos específicos y se realiza una acción en consecuencia?

que tienen la siguiente JavaScript

$('#master').click(function() { 
    $('#slave').toggle(); 
}); 

$(document).not('#master','#slave').click(function() { 
    $('#slave').hide(); 
}); 

y no puedo ver donde estoy saliendo mal lógicamente. Se puede ver un ejemplo vivo here

Answer 1

Puesto que usted está de unión al evento click en el documento, puede utilizar event.target para obtener el elemento que inicia el evento:

$(document).click(function(event) { 
    if (!$(event.target).is("#master, #slave")) { 
     $("#slave").hide(); 
    } 
}); 

EDIT: Como Mattias con razón señala en su comentario, el código anterior no identificará los eventos de clics provenientes de los descendientes de #master y #slave (si hay alguno). En esta situación, se puede utilizar para comprobar closest() objetivo del evento:

$(document).click(function(event) { 
    if (!$(event.target).closest("#master, #slave").length) { 
     $("#slave").hide(); 
    } 
}); 

Answer 2

¿Este código de hacer lo que quiera? (No del todo seguro de si he entendido bien)

$('body').on('click', '*:not(#master, #slave)', function() { 
    $('#slave').hide(); 
}); 

http://jsfiddle.net/gZ4Hz/8/

Answer 3

Otro pensamiento, que pueden no estar funcionando porque su navegador no hagan quizás body a la altura del 100%; Intenta ajustar tu base de css para arreglar la altura del cuerpo y luego un par de pensamientos más.

e.stopPropagation(): Evita que el evento burbujee el árbol DOM, evitando que se notifique a ningún controlador principal del evento.

Así que si cambia el primer código de clic al siguiente:

$('#master').click(function(e) { 
    e.stopPropagation(); 
    $('#slave').toggle(); 
}); 

entonces se podría cambiar el distintivo de llamada de la segunda también:

$("body, body *").not('#master, #slave').click(function(e) { 
    $('#slave').hide(); 
}); 

y que debe cubrirlo. ¡Darle una oportunidad! o vea this jsFiddle

Answer 4

La delegación de eventos ha sido soportada desde hace mucho por jQuery. La dificultad radica en crear el selector apropiado. Originalmente, se usó delegate, pero más recientemente se debe usar el formulario delegado de on.

El propósito de la delegación de eventos es escuchar eventos en elementos secundarios e invocar a los manejadores de eventos enlazados en esos elementos como si hubieran sido vinculados al elemento hijo, en lugar de al padre. Esto significa que en lugar de vincular controladores a cada elemento en el DOM, está vinculando un controlador a cada elemento en la selección inicial (document es un elemento único).Esto también hace que para una forma sencilla de utilizar un solo selector de unirse a un conjunto siempre cambiante de elementos, como nuevos elementos y se propague a sus eventos a document si son o no existían cuando el controlador de eventos inicial fue obligado:

$(document).on('click', '*:not(#master, #master *, #slave, #slave *)', function (e) { 
    //this will reference the clicked element 
}); 

Además, tenga en cuenta que no solo dije que los elementos no deben ser #master o #slave, sino no deben ser hijos de #master o #slave tampoco.

Answer 5

Las respuestas de Fredrik funcionan para los elementos ya presentes en el documento, pero no funcionó para los elementos recuperados por las llamadas ajax. Intenté lo siguiente y me funciona. Compartir el código para futuros codificadores Ajax.

$(document).on('click',function(event) { 
     if (!$(event.target).closest("#selector").length) { 
      if ($('#selector').is(":visible")) 
       $('#selector').slideUp(); 
     } 
    }); 

Lo habría publicado como comentario pero no tengo suficiente reputación para eso.