Javascript Détecte un événement de clic en dehors de div

J'ai un div avec id="contenu de la zone", lorsqu'un utilisateur clique en dehors de cette div, je tiens à les alerter sur le fait qu'ils ont cliqué sur l'extérieur. Comment puis-je utiliser JavaScript pour résoudre ce problème?

<div id = "outer-container">
   <div id = "content-area">
      Display Conents 
   </div>
</div>

source d'informationauteur Dibish | 2013-09-19

En pure Javascript

Découvrez ce violon et voir si c'est ce que vous êtes après!

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/

11

Lier l'Événement onClick d'un élément qui est à l'extérieur de votre zone de contenu, par exemple le corps. Puis, à l'intérieur de l'événement, vérifiez si la cible est la zone de contenu ou, directe ou indirecte, de l'enfant de la zone de contenu. Si non, alors l'alerte.

J'ai fait une fonction qui vérifie si c'est un enfant ou pas. Elle renvoie true si le parent d'un nœud est la recherche d'un parent. Si non, alors elle vérifie si elle a effectivement un parent. Si non, alors elle retourne false. S'il a un parent, mais ce n'est pas la recherche, qu'il vérifie si le parent du parent est à la recherche d'un parent.
```
function isChildOf(child, parent) {
    if (child.parentNode === parent) {
      return true;
    } else if (child.parentNode === null) {
      return false;
    } else {
      return isChildOf(child.parentNode, parent);
    }
}
```
Aussi consulter les Live Exemple (contenu de la zone = gris)!
6

La Nœud.contient du (de la) méthode renvoie une valeur Booléenne indiquant si un nœud est un descendant d'un nœud donné ou pas

Vous pouvez capturer des événements à l'aide de
```
document.addEventListener("click", clickOutside, false);
function clickOutside(e) {
   const inside = document.getElementById('content-area').contains(e.target);
}
```
N'oubliez pas de supprimer l'événement écouté au bon endroit
```
document.removeEventListener("click", clickOutside, false)
```
5

J'ai fait un simple et petit bibliothèque js de le faire pour vous:

Il détourne le natif de la méthode addEventListener, pour créer un outclick événement et dispose également d'un setter sur le prototype .onoutclick
D'Utilisation De Base De

À l'aide de outclick vous pouvez enregistrer des écouteurs d'événement sur les éléments DOM pour détecter si un autre élément qui a été l'élément ou un autre élément à l'intérieur, il a été cliqué. L'utilisation la plus commune de ce qui est dans les menus.
```
var menu = document.getElementById('menu')

menu.onoutclick = function () {
    hide(menu)
}
```
cela peut aussi ê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. Ce ne gère pas le HTML dynamique, et nous n'avons pas l'intention d'ajouter que, encore
```
<div outclick="someFunc()"></div>
```
Amusez-vous!
2

Utilisation document.activeElement de voir qui de vos éléments html est active.

Ici est une référence:
document.activeElement dans MDN

$('#outer-container').on('click', function (e) {
     if (e.target === this) {
        alert('clicked outside');
     }
});

C'est pour le cas que vous cliquez à l'intérieur de la extérieur-conteneur mais à l'extérieur de la contenu de la zone.

Ici est 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');
    }


}

utiliser jquery comme de son mieux pour le DOM accès

$(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");
});

Mettre ceci dans votre document:

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

Vous devez vous connecter pour publier un commentaire.