Détecter cliquez à l'intérieur/à l'extérieur de l'élément avec un seul gestionnaire d'événements

Supposons que j'ai un div dans ma page. comment détecter le clic de l'utilisateur sur les div de contenu ou à l'extérieur de la div de contenu à l'aide de JavaScript ou JQuery. s'il vous plaît aider avec petit extrait de code.
merci.

Modifier: Comme le faisait remarquer dans l'une des réponses ci-dessous, je ne veux associer un gestionnaire d'événement à mon corps, et vous voulez également savoir quel élément est cliqué sur.

InformationsquelleAutor Thomas | 2011-01-11

javascript jquery

77

En JavaScript (via jQuery):

JS:
```
$(function() {
  $("body").click(function(e) {
    if (e.target.id == "myDiv" || $(e.target).parents("#myDiv").length) {
      alert("Inside div");
    } else {
      alert("Outside div");
    }
  });
})
```
CSS:
```
#myDiv {
  background: #ff0000;
  width: 25vw;
  height: 25vh;
}
```
HTML:
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv"></div>
```
- Ce ne sera pas gérer les cas où l'utilisateur clique sur un enfant de la div; il fera rapport "outside div".
- Nice. Votre utilisation de parents() m'a inspiré pour mettre à jour ma réponse à utiliser plus de jQuery et moins de la vieille école de la traversée.
- Cela ne fonctionnera pas si il y a des éléments en dehors de la div qui utilisent stopPropagation, voir l'exemple ici: jsfiddle.net/Flandre/YdrTA
- André, ne peut pas faire grand chose qui ne peut pas nous?
- L'amour que $(e.target).parents("#myDiv").length, je peux mémoriser que les autres codes que j'ai trouvé étaient beaucoup plus complexe et n'a même pas fonctionner correctement, merci beaucoup!
InformationsquelleAutor amosrivera
64

Voici un une ligne qui ne nécessite pas de jquery en utilisant Nœud.contient:
```
//Get arbitrary element with id "my-element"
var myElementToCheckIfClicksAreInsideOf = document.querySelector('#my-element');
//Listen for click events on body
document.body.addEventListener('click', function (event) {
    if (myElementToCheckIfClicksAreInsideOf.contains(event.target)) {
        console.log('clicked inside');
    } else {
        console.log('clicked outside');
    }
});
```
Si vous vous posez des questions sur le cas limite de vérifier si le clic est sur l'élément lui-même, Nœud.contient renvoie la valeur true pour l'élément lui-même (par exemple,element.contains(element) === true) donc cet extrait devrait toujours fonctionner.

Prise en charge du navigateur semble couvrir à peu près tout selon que le MDN page.
- Ceci est la non-jquery répondre, je vous remercie!
- son la contains qui obtient le upvote
InformationsquelleAutor KhalilRavanna
12

À l'aide de jQuery, et en supposant que vous avez <div id="foo">:
```
jQuery(function($){
  $('#foo').click(function(e){
    console.log( 'clicked on div' );
    e.stopPropagation(); //Prevent bubbling
  });
  $('body').click(function(e){
    console.log( 'clicked outside of div' );
  });
});
```
Modifier: Pour un seul gestionnaire:
```
jQuery(function($){
  $('body').click(function(e){
    var clickedOn = $(e.target);
    if (clickedOn.parents().andSelf().is('#foo')){
      console.log( "Clicked on", clickedOn[0], "inside the div" );
    }else{
      console.log( "Clicked outside the div" );
  });
});
```
- merci pour vos efforts, mais je veux d'une manière différente. je veux saisir l'identifiant de l'élément où le clic s'est produit et je veux le gérer au niveau de la masse ne souhaitez joindre un gestionnaire d'événements click avec des div.
- si je clique sur #foo qui déclenche également le corps des gestionnaires car toto est à l'intérieur du corps
- Non, ce n'est pas le cas, parce que l'appel à stopPropagation l'empêche de bulles. Vous pouvez le tester par vous-même ici: jsfiddle.net/Qh2MN
- J'ai mis à jour ma réponse avec un seul conducteur, sur le corps qui vous dit si le clic a été à l'intérieur de la div ou à l'extérieur.
- Travailler avec sur comme prévu, mais il est intéressant de ne pas travailler avec "touchend": lorsque vous cliquez à l'intérieur et en la faisant glisser à l'extérieur et en le relâchant, le clickedOn.is('#foo') correspond à true.
InformationsquelleAutor Phrogz
9

Plutôt que d'utiliser le jQuery .parents fonction (comme suggéré dans l'acceptation de réponse), il est préférable d'utiliser .closest à cette fin. Comme expliqué dans les docs de l'api jQuery, .closest vérification de l'élément passé et tous ses parents, alors que .parents vérifie juste les parents.
Par conséquent, cela fonctionne:
```
$(function() {
    $("body").click(function(e) {
        if ($(e.target).closest("#myDiv").length) {
            alert("Clicked inside #myDiv");
        } else { 
            alert("Clicked outside #myDiv");
        }
    });
})
```
InformationsquelleAutor RayOnAir

Quoi à ce sujet?

<style type="text/css">
div {border: 1px solid red; color: black; background-color: #9999DD;
width: 20em; height: 40em;}
</style>
<script type="text/javascript">
function sayLoc(e) {
e = e || window.event;
var tgt = e.target || e.srcElement;
//Get top lef co-ords of div
var divX = findPosX(tgt);
var divY = findPosY(tgt);
//Workout if page has been scrolled
var pXo = getPXoffset();
var pYo = getPYoffset();
//Subtract div co-ords from event co-ords
var clickX = e.clientX - divX + pXo;
var clickY = e.clientY - divY + pYo;
alert('Co-ords within div (x, y): '
+ clickX + ', ' + clickY);
}
function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
} else if (obj.x) {
curleft += obj.x;
}
return curleft;
}
function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop
obj = obj.offsetParent;
}
} else if (obj.y) {
curtop += obj.y;
}
return curtop;
}
function getPXoffset(){
if (self.pageXOffset) { //all except Explorer
return self.pageXOffset;
} else if (document.documentElement
&& document.documentElement.scrollTop) {//Explorer 6 Strict
return document.documentElement.scrollLeft;
} else if (document.body) { //all other Explorers
return document.body.scrollLeft;
}
}
function getPYoffset(){
if (self.pageYOffset) { //all except Explorer
return self.pageYOffset;
} else if (document.documentElement
&& document.documentElement.scrollTop) {//Explorer 6 Strict
return document.documentElement.scrollTop;
} else if (document.body) { //all other Explorers
return document.body.scrollTop;
}
}
</script>
<div onclick="sayLoc(event);"></div>

(à partir de http://bytes.com/topic/javascript/answers/151689-detect-click-inside-div-mozilla l'aide de Google.)

C'est une quantité folle de code pour quelque chose qui peut maintenant être fait en une seule ligne: stackoverflow.com/a/28432139/288906
c'est exactement ce que j'en ai besoin, même la quantité folle de code

InformationsquelleAutor buildsucceeded

Cette question peut être répondue avec les coordonnées X et Y et sans JQuery:

       var isPointerEventInsideElement = function (event, element) {
var pos = {
x: event.targetTouches ? event.targetTouches[0].pageX : event.pageX,
y: event.targetTouches ? event.targetTouches[0].pageY : event.pageY
};
var rect = element.getBoundingClientRect();
return  pos.x < rect.right && pos.x > rect.left && pos.y < rect.bottom && pos.y > rect.top;
};
document.querySelector('#my-element').addEventListener('click', function (event) {
console.log(isPointerEventInsideElement(event, document.querySelector('#my-any-child-element')))
});

InformationsquelleAutor Alex Nikulin

Pour bootstrap 4 cela fonctionne pour moi.

$(document).on('click', function(e) {
$('[data-toggle="popover"],[data-original-title]').each(function() {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide')
}
});
});

de travail de démonstration sur jsfiddle lien:
https://jsfiddle.net/LabibMuhammadJamal/jys10nez/9/

InformationsquelleAutor Labib Muhammad Jamal

De vanille dans du javaScript dans ES6

JS:

(() => {
document.querySelector('.parent').addEventListener('click', event => {
alert(event.target.classList.contains('child') ? 'Child element.' : 'Parent element.');
});
})();

CSS:

.parent {
display: inline-block;
padding: 45px;
background: lightgreen;
}
.child {
width: 120px;
height:60px;
background: teal;
}

HTML:

<div class="parent">
<div class="child"></div>
</div>

InformationsquelleAutor Santo Boldižar

0

Si vous souhaitez ajouter un écouteur de clics dans google chrome, console, utilisez ce
```
document.querySelectorAll("label")[6].parentElement.onclick = () => {console.log('label clicked');}
```
InformationsquelleAutor RAX

-1

Au lieu d'utiliser le corps, vous pouvez créer un rideau avec z-index de 100 (pour choisir un numéro) et donnent à l'intérieur de l'élément supérieur z-index alors que tous les autres éléments ont une plus faible z-index que le rideau.

Voir exemple ici: http://jsfiddle.net/Flandre/6JvFk/

jQuery:

$('#curtain').on("click", function(e) {
$(this).hide();
alert("clicked ouside of elements that stand out");
});

CSS:

.aboveCurtain
{
z-index: 200; /* has to have a higher index than the curtain */
position: relative;
background-color: pink;
}
#curtain
{
position: fixed;
top: 0px;
left: 0px;
height: 100%;
background-color: black;
width: 100%;
z-index:100;   
opacity:0.5 /* change opacity to 0 to make it a true glass effect */
}

InformationsquelleAutor Andre

Vous devez vous connecter pour publier un commentaire.