web-dev-qa-db-fra.com

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

J'ai un div avec id = "content-area", lorsqu'un utilisateur clique en dehors de cette div, je souhaite l'avertir du fait qu'il a cliqué en dehors de cette div Comment utiliser JavaScript pour résoudre ce problème?

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

En Javascript pur

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

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/

22
jollelj

Liez l'événement onClick à un élément situé en dehors de votre zone de contenu, par exemple. le corps. Ensuite, dans l'événement, vérifiez si la cible est la zone de contenu ou un enfant direct ou indirect de la zone de contenu. Si non, alors alerte.

J'ai créé une fonction qui vérifie si c'est un enfant ou non. Il renvoie true si le parent d'un nœud est le parent recherché. Si non, alors il vérifie s'il a réellement un parent. Sinon, il retourne faux. S'il a un parent, mais pas celui recherché, il vérifie si le parent du 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 le Exemple en direct (zone de contenu = gris)!

11
Butt4cak3

La méthode Node.contains () renvoie une valeur booléenne indiquant si un nœud est un descendant d'un nœud 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 supprimer l'événement écouté au bon endroit 

document.removeEventListener("click", clickOutside, false)
6
Jan Vorcak

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

Il détourne addEventListener natif, pour créer un événement de surclick et a également un setter sur le prototype pour .onoutclick

Utilisation de base

En utilisant outclick, vous pouvez enregistrer des écouteurs 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 de celui-ci a été cliqué. L'utilisation la plus courante de ceci 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. Cela ne gère pas le code HTML dynamique, et nous n’avons pas l’intention de l’ajouter pour le moment.

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

S'amuser!

5
Joe Thomas

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

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

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

C'est pour le cas où vous cliquez à l'intérieur du outer-container mais à l'extérieur de la content-area .

1
TomNg

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


}
0
Pimento Web

utiliser 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");
});
0
Ronak Patel

Mettez ceci dans votre document:

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