Détecter cliquez à l'extérieur de l'élément (vanille JavaScript)

J'ai cherché pendant une bonne solution partout, mais je ne peux pas en trouver un qui ne pas utiliser jQuery.

Est-il de la croix-navigateur, de façon normale (sans bizarre hacks ou faciles à casser le code), pour détecter un clic à l'extérieur d'un élément (qui peut ou peut ne pas avoir d'enfants)?

  • Serait configuration d'un gestionnaire d'événement onclick sur le corps de la balise de faire le travail?
InformationsquelleAutor Tiberiu-Ionuț Stan | 2013-01-07
  1. 112

    Ajouter un écouteur d'événement à document et l'utilisation Nœud.contains() à trouver si la cible de l'événement (qui est à l'intérieur de la plupart des cliqué sur l'élément) est à l'intérieur de votre élément spécifié. Il fonctionne même dans IE5

    var specifiedElement = document.getElementById('a');

//I'm using "click" but it works with any event
document.addEventListener('click', function(event) {
  var isClickInside = specifiedElement.contains(event.target);

  if (!isClickInside) {
    //the click was outside the specifiedElement, do something
  }
});

    JS:

    var specifiedElement = document.getElementById('a');

//I'm using "click" but it works with any event
document.addEventListener('click', function(event) {
  var isClickInside = specifiedElement.contains(event.target);
  if (isClickInside) {
    alert('You clicked inside A')
  } else {
    alert('You clicked outside A')
  }
});

    CSS:

    div {
  margin: auto;
  padding: 1em;
  max-width: 6em;
  background: rgba(0, 0, 0, .2);
  text-align: center;
}

    HTML:

    Is the click inside A or outside?
<div id="a">A
  <div id="b">B
    <div id="c">C</div>
  </div>
</div>

    • Semble être la solution la plus élégante pour moi.
    • Excellent et élégant. Il fonctionne vraiment.
    • Excellente solution.
    • Solution la plus simple que j'ai jamais vu. La méthode contains()
    InformationsquelleAutor bfred.it
  2. 25

    Vous avez besoin pour gérer l'événement de clic sur le document de niveau. Dans le cas de l'objet, vous avez un target de la propriété, le plus intérieur de l'élément DOM qui a été cliqué. Ceci vous permet de vérifier lui-même et marcher jusqu'à ses parents jusqu'à ce que l'élément de document, si l'un d'eux est regardé votre élément.

    Voir l'exemple sur jsFiddle

    document.addEventListener("click", function (e) {
  var level = 0;
  for (var element = e.target; element; element = element.parentNode) {
    if (element.id === 'x') {
      document.getElementById("out").innerHTML = (level ? "inner " : "") + "x clicked";
      return;
    }
    level++;
  }
  document.getElementById("out").innerHTML = "not x clicked";
});

    Comme toujours, ce n'est pas de la croix-bad-navigateur compatible en raison de la méthode addEventListener/attachEvent, mais il fonctionne comme ceci.

    Un enfant est cliqué, lorsqu'il n'est pas de l'événement.cible, mais l'un de ses parents est le regardé élément (je suis un simple comptage pour cette). Vous pouvez également avoir un booléen var, si l'élément est présent ou pas, de ne pas retourner au gestionnaire de l'intérieur pour la clause. Mon exemple est un facteur limitant pour que le gestionnaire seulement finitions, quand rien ne correspond.

    L'ajout de croix-navigateur de compatibilité, j'ai l'habitude de le faire comme ceci:

    var addEvent = function (element, eventName, fn, useCapture) {
  if (element.addEventListener) {
    element.addEventListener(eventName, fn, useCapture);
  }
  else if (element.attachEvent) {
    element.attachEvent(eventName, function (e) {
      fn.apply(element, arguments);
    }, useCapture);
  }
};

    C'est cross-browser compatible code pour attacher un écouteur d'événement/gestionnaire, inclusive réécriture this dans IE, à l'élément, comme le fait jQuery pour ses gestionnaires d'événements. Il y a beaucoup d'arguments ont certains bits de jQuery à l'esprit 😉

    • Que faire si l'utilisateur clique sur un enfant de l'élément?
    • Grâce à cette solution, vous vérifiez la target propriété (qui, comme metadings dit, sera le plus intérieur de l'élément DOM) - et tous ses éléments parents. Soit vous atteindre vos regardé élément, ce qui signifie que l'utilisateur a cliqué à l'intérieur, ou que vous arrivez à l'élément de document, dans lequel cas, il/elle a cliqué sur l'extérieur. Alternativement, vous pouvez ajouter deux sur les auditeurs - l'un sur l'élément de document, et de l'autre sur le regardé-élément, qui utilise event.stopPropagation()/cancelBubble, afin que l'auditeur sur l'élément de document est uniquement déclenché par un clic à l'extérieur de l'regardé élément.
    • C'est une utilisation intelligente de la for. Par curiosité, y aurait-il quelque raison de ne pas comparer un élément à partir d'une variable avec la cible sur l'événement (à l'aide d'une comparaison stricte)?
    • oui, si vous créez cette "montre" à l'aide d'une référence au lieu de l'id de "x", je vous suggère d'utiliser l'élément === watchedElement à l'aide de triple égal à égal.
    • Votre solution fonctionne très bien. Cela peut être une question personnelle, mais je préfère le partager. J'ai le même besoin, mais d'un bouton cliqué affiche une div qui, lorsque l'utilisateur clique à l'extérieur, il doit être masqué. Le problème avec cette solution est que la div n'est jamais montré de nouveau. Je bifurquais votre code ici pour un exemple: jsfiddle.net/bx5hnL2h
    InformationsquelleAutor metadings
  3. 6

    Comment à ce sujet:

    jsBin démo

    document.onclick = function(event){
  var hasParent = false;
    for(var node = event.target; node != document.body; node = node.parentNode)
    {
      if(node.id == 'div1'){
        hasParent = true;
        break;
      }
    }
  if(hasParent)
    alert('inside');
  else
    alert('outside');
}
    InformationsquelleAutor Akhil Sekharan
  4. 0

    Pour masquer l'élément de cliquer en dehors de ça j'ai l'habitude d'appliquer de telles code simple:

    JS:

    var bodyTag = document.getElementsByTagName('body');
var element = document.getElementById('element'); 
function clickedOrNot(e) {
	if (e.target !== element) {
		//action in the case of click outside 
		bodyTag[0].removeEventListener('click', clickedOrNot, true);
	}	
}
bodyTag[0].addEventListener('click', clickedOrNot, true);

    InformationsquelleAutor Aleks Sid