Masquage de la balise div lorsque l'utilisateur clique à l'extérieur de l'étiquette div

Question

J'ai une balise div et je remplis les résultats de la recherche sur une grille personnalisée, qui est placée à l'intérieur de ce divtag.

Lorsqu'un utilisateur clique sur le bouton de recherche, j'affiche les résultats dans la balise div mentionnée ci-dessus.

J'ai l'obligation de fermer l'étiquette div ci-dessus lorsque l'utilisateur clique à l'extérieur de l'étiquette div.

Il est similaire à google search auto comlete.

Merci d'avance.

Answer 1

Idée de base

1. Fil un événement onclick sur l'étiquette du corps pour cacher la div.
2. Câblez un événement onclick sur la balise div et arrêtez le bouillonnement de l'événement.

Voir Event order

Pour arrêter l'événement bouillonnant

Dans le modèle Microsoft vous devez définir la propriété cancelBubble de l'événement à true.

window.event.cancelBubble = true 

Dans le modèle W3C, vous devez appeler la méthode stopPropagation() de l'événement.

e.stopPropagation() 

Answer 2

En jQuery, quelque chose comme ceci:

$('body').click(function(ev){ 
    if (!$(this).hasClass('your_result_container_classname') { 
    // code to hide result div 
    $('body').unbind('click'); // remove event handler. add again when results shown. 
    } 
});