Usa JQuery per ascoltare tutti i clic sul corpo html Tranne uno specifico div e i suoi figli

Question

Sto provando a utilizzare un listener jQuery per ascoltare gli utenti che fanno clic sul corpo html ed eseguire una funzione specifica se in qualsiasi parte del corpo è presente stato cliccato tranne che per un div specifico e per i bambini all'interno di quel div.

L'idea è che il div è un elemento di tipo popup e invece di dover avere un pulsante di chiusura che l'utente può fare clic, dovrebbero essere in grado di fare clic in qualsiasi punto della pagina oltre a quel div e si chiuderà automaticamente.

Ho utilizzato questo listener:

var initialClick = false; 
$('body').on('click.addPhoneListeners', function(event) { 
    var target = EventUtility.getTarget(event); 
    if(initialClick) { 
     if(target.parentNode.id != clone.id && target.id != '') { 
      finish(); 
     }; 
    } 
    initialClick = true; 
}); 

in ascolto per tutti i clic sul corpo ea meno che il click viene da dentro l'elemento che voglio l'utente sia in grado di interagire con, si chiude. Sfortunatamente funziona solo con un div che ha solo un livello di bambini. Appena ho iniziare a ricevere più gerarchie come questa:

<div id="addressContainer"> 
    <div id="address" class="hidden row"> 
     <div class="row"> 
      <div id="address.primary" class="hidden">P</div> 
      <div id="address.type"></div> 
      <div id="address.street"></div> 
      <div id="address.editButton" class="hidden"><a id="addressEditButton">Edit</a></div> 
      <div id="address.deleteButton" class="hidden"><a id="addressDeleteButton">Delete</a></div> 
     </div> 
     <div class="row"> 
      <div id="address.city"></div> 
      <div id="address.state"></div> 
      <div id="address.zip"></div> 
     </div> 
     <input type="hidden" id="address.id"></input> 
    </div> 
</div> 

Il target.parentNode.id mi dà l'elemento padre oggetti in contrasto con l'addressContainer id e quindi non funziona. È utilizzare il genitore di livello superiore all'interno degli elementi nidificati? Altri elementi useranno questo stesso codice, quindi deve lavorare su entrambi i div con un solo livello e div con multiplo.

AGGIORNAMENTO: Ho trovato alcune soluzioni eccellenti, grazie ragazzi. Tuttavia, ho un'altra domanda. Fai riferimento al mio codice qui sopra dove ho impostato un booleano initialClick su false, quindi l'ho impostato su true. Lo sto facendo perché per qualche motivo se non lo faccio, quando vado ad aggiungere il popup div, il click iniziale dal pulsante usato per impostare quel popup fa scattare l'ascoltatore e chiude il popup prima che io abbia la possibilità di fare qualsiasi cosa. Questa è stata la mia soluzione attorno al problema, ma è l'unico modo? O sto semplicemente impostando l'ascoltatore leggermente errato?

Answer 1

faccio di solito qualcosa di simile:

$(document).click(function(e) { 
    // hide popup 
}); 

$('#popup_div').click(function(e) { 
    e.stopPropagation(); 
}); 

In questo modo i clic dal vostro popup non si propagano al documento, in modo che la funzione di chiusura non si attiva mai.

Answer 2

Sostituire

if(target.parentNode.id != clone.id) 

con

if ($(target).closest("#" + clone.id).length === 0) 

(ho lasciato la seconda clausola da sola dal momento che non sembrava legato alla tua domanda.)

Questo cerca di trovare l'antenato più vicino con ID uguale a clone.id. Se nessuno viene trovato, viene restituito un oggetto jQuery vuoto (ad esempio uno con length === 0), che è ciò per cui testiamo.

---

Per inciso: jQuery normalizza event.target, in modo da poter utilizzare solo che invece di qualsiasi mostruosità personalizzato EventUtility.getTarget(event) incarna.