Javascript - Problema con addEventListener (apri/chiudi div)

Salve ragazzi ho il seguente problema ...in pratica avrei un link e un div

<a href='#' id='nl'>Link</a>
<div id='dnl' style='display: none'>Contenuto</div>

In pratica vorrei che al click del link il div si visualizzasse e che al riclick del click scomparisse. Inoltre vorrei che che al click in un
qualunque punto della pagina il div scomparisse, tutto in puro JavaScript (no jQuery). Ho implemnetato il seguente codice:

var nl = document.getElementById('nl');
		nl.addEventListener(
			'click', 
			function(e) { 
				var d = document.getElementById("dnl");			
				if(d.style.display == 'block') { 
					d.style.display = 'none'; 
				} else { 
					d.style.display = 'block'; 
				}
			}, 
			true
		);
		
		document.addEventListener(
			'click', 
			function(e) { 
				var d = document.getElementById("dnl");			
				if(d.style.display == 'block') { 
					d.style.display = 'none'; 
				} 
			}, 
			true
		);

Questo codice funziona ma presenta l'intoppo:
1. al click Link apre il div - OK
2. al click in u qualunque punto della pagina chiude il div - OK
3. al ri-click del Link (con il div aperto) non chiude il div - NON VA BENE

Come posso risolvere il punto 3? Grazie e spero di essere stato chiaro.

Gli eventi vengono propagati nel DOM con un effetto bolla (quindi i listeners sia per document che per il link vengono invocati).

Per interrompere la propagazione usa il metodo stopPropagation.

document.addEventListener(
                        'click',
                        function(e) {
                                var d = document.getElementById("dnl");                
                                if(d.style.display == 'block') {
                                        d.style.display = 'none';
                                        e.stopPropagation();
                                }
                        },
                        true
                );

Nota come il terzo parametro di addEventListener (true) specifica l'ordine in cui gli eventi vengono propagati: quirksmode.org/js/… (in questo caso dalla cima verso il fondo del DOM, quindi document viene invocato prima).

Occhio anche alla compatibilità del metodo stopPropagation (che non è universale). Per questo a volte è conveniente usare jQuery (che si occupa di gestire questi problemi).

Grazie. Funziona alla grande. Il metodo stopPropagation è compatibile con tutti i browser tranne che per versioni inferiori a IE9 dove si potrebbe aggirare il problema aggiungendo questo semplice controllo

if (e.stopPropagation) {
						e.stopPropagation(); // tutti i browser, compreso IE 9+
					} else {
						e.cancelBubble = true;  // IE inferiori a 9
					}