JavaScript perdre focus

Question

J'ai un div qui est défini sur display:inline en utilisant le gestionnaire d'événements onclick() JS. Comment puis-je faire le div revenir à display:none lorsque je clique n'importe où ailleurs sur la page autre que la div maintenant visible?

J'ai recherché sur Google blur et en réglant le focus à un autre élément mais je ne sais pas comment le faire réellement.

Answer 1

Vous pouvez créer un div absolu couvrant toute la surface de la fenêtre en lui donnant 100% de largeur et de hauteur, puis lui donner un onclick pour afficher: none votre div. votre div devrait avoir un z-index supérieur à la div absolue

Answer 2

Si vous souhaitez utiliser jQuery, il est facile:

$('*').click(function(){ 
    if ($(this).attr('id') !== 'div_id'){ 
    $('#div_id').css('display', 'none'); 
    } 
}); 

Le ci-dessus devient plutôt lent avec tout * sélecteur, donc Je vous recommande d'utiliser jQuery Outside Events plugin.

Exemple:

$('#div_id').bind('clickoutside', function(){ 
    $(this).css('display', 'none'); 
}); 

Answer 3

l'échantillon js brut peut être trouver here.

Answer 4

document.onclick = function(e) { 
    if (!e) var e = window.event; 
    if (e.target.id == 'the_id_of_your_div') { 
    // Do something 
    } else { 
    // Do something else 
    } 
}