Javascript Détectez l'événement de clic en dehors de div

En pur Javascript

Découvrez ce violon et voyez si c'est ce que vous attendez!

 document.getElementById('outer-container').onclick = function(e) { if(e.target != document.getElementById('content-area')) { document.getElementById('content-area').innerHTML = 'You clicked outside.'; } else { document.getElementById('content-area').innerHTML = 'Display Contents'; } } 

http://jsfiddle.net/DUhP6/2/

Reliez l'événement onClick à un élément qui se trouve en dehors de votre zone de contenu, par exemple le corps. Ensuite, à l'intérieur de l'événement, vérifiez si la cible est la zone de contenu ou un enfant direct ou indirect de la zone de contenu . Sinon, alerte.

J'ai fait une fonction qui vérifie si c'est un enfant ou non. Il retourne vrai si le parent d'un nœud est le parent recherché. Sinon, il vérifie s'il a effectivement un parent. Sinon, il renvoie faux. S'il a un parent, mais ce n'est pas celui recherché, il vérifie si le parent parent est le parent recherché.

 function isChildOf(child, parent) { if (child.parentNode === parent) { return true; } else if (child.parentNode === null) { return false; } else { return isChildOf(child.parentNode, parent); } } 

Consultez également l' exemple en direct (zone de contenu = gris)!

J'ai fait une simple et petite bibliothèque js pour faire cela pour vous:

Il enlève l'addEventListener natif, crée un événement outclick et dispose également d'un setter sur le prototype pour .onclic

Utilisation de base

À l'aide d'un outclick, vous pouvez enregistrer des auditeurs d'événements sur des éléments DOM pour détecter si un autre élément qui était cet élément ou un autre élément à l'intérieur a été cliqué. L'utilisation la plus courante est dans les menus.

 var menu = document.getElementById('menu') menu.onoutclick = function () { hide(menu) } 

Cela peut également être fait en utilisant la méthode addEventListener

 var menu = document.getElementById('menu') menu.addEventListener('outclick', function (e) { hide(menu) }) 

Alternativement, vous pouvez également utiliser l'attribut html outclick pour déclencher un événement. Cela ne gère pas le HTML dynamique, et nous n'avons aucun plan pour ajouter cela, cependant

 <div outclick="someFunc()"></div> 

S'amuser!

La méthode Node.contains () renvoie une valeur booléenne indiquant si un noeud est un descendant d'un noeud donné ou non

Vous pouvez attraper des événements en utilisant

 document.addEventListener("click", clickOutside, false); function clickOutside(e) { const inside = document.getElementById('content-area').contains(e.target); } 

N'oubliez pas de retirer l'événement écouté au bon endroit

 document.removeEventListener("click", clickOutside, false) 

Utilisez document.activeElement pour voir lequel de vos éléments html est actif.

Voici une référence: document.activeElement in MDN

Utilisez jquery comme son meilleur pour l'accès DOM

 $(document).click(function(e){ if($(e.target).is("#content-area") || $(e.target).closest("#content-area").length) alert("inside content area"); else alert("you clicked out side content area"); }); 

Voici le violon: http://jsfiddle.net/uQAMm/1/

 $('#outercontainer:not(#contentarea)').on('click', function(event){df(event)} ); function df(evenement) { var xstart = $('#contentarea').offset().left; var xend = $('#contentarea').offset().left + $('#contentarea').width(); var ystart = $('#contentarea').offset().top; var yend = $('#contentarea').offset().top + $('#contentarea').height(); var xx = evenement.clientX; var yy = evenement.clientY; if ( !( ( xx >= xstart && xx <= xend ) && ( yy >= ystart && yy <= yend )) ) { alert('out'); } } 

Mettez ceci dans votre document:

 <script> document.onclick = function(e) { if(e.target.id != 'content-area') alert('you clicked outside of content area'); } </script>