Détecter clic sur un div ou l'un de ces enfants

Bonjour à tous,

J'ai une série de div contenant différentes informations et cela ressemble à peu de chose prêt à ça :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div id="stock_search-form-item"> <div class="center mbl" id="listresult"> <div data-itmref="ref01">titre</div> <div class="col-2" data-itmref="ref01"> <p class="txt-size-0-8 no-padding" data-itmref="ref01">ref01 - des</p> <p class="txt-size-0-8 no-padding" data-itmref="ref01">eancode - votre code autre ref</p> </div> </div> <div data-itmref="ref02">titre</div> <div class="col-2" data-itmref="ref02"> <p class="txt-size-0-8 no-padding" data-itmref="ref02">ref01 - des</p> <p class="txt-size-0-8 no-padding" data-itmref="ref02">eancode - votre code autre ref</p> </div> [...] </div> </div> </div>

---

Côté javascript :

Code:

---

1 2 3 4 5

document.addEventListener('click', e => { if(e.target && e.target.id == 'stock_search-form-item' || e.target.parentElement.id == 'stock_search-form-item') { adv.searchItmSetItem(e) } })

---

Je cherche une solution pour détecter le clic sur un des div sous l'id "listresult" ou des enfants de ces div contenant pour récupérer la valeur de data-itmref. Avec mon code cela marche que si le div contient un seul niveau de balise enfant. Comment faire pour avoir le même comportement mais peut importe le niveau cliqué ?

Merci d'avance.
Philippe.

Après d'autres recherches j'arrive à ce code

Code:

---

1 2 3 4 5 6

let containingElement = document.querySelector('#listresult') document.body.addEventListener('click', function(event) { if(containingElement.contains(event.target)) { adv.searchItmSetItem(event) } })

---

Bonjour,
regarde du côté de Element.closest()

Code:

---

1 2 3 4 5 6 7

document.addEventListener('click', e => { const elem = e.target; const parent = elem.closest("#stock_search-form-item"); if (parent) { console.log("Bingo !!!", elem, parent); } })

---

Bonjour,

Désolé de ma réponse tardive.

J'ai testé ta solution et en fait je me suis rendu compte que j'ai fais une erreur lorsque j'ai écris mon 1er message sur la partie HTML.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<div id="listresult" class="center"> <div data-itmref="ref01" id="stock_search-form-item"> <div data-itmref="ref01">aaaaa</div> <div data-itmref="ref01"><img src="...." data-itmref="ref01"></div> <div data-itmref="ref01"> <p data-itmref="ref01">ref01 - désignation</p> <p data-itmref="ref01">xxxxx - votre code </p> </div> </div> <div data-itmref="ref02" id="stock_search-form-item"> <div data-itmref="ref02">bbbbb</div> <div data-itmref="ref02"> <p data-itmref="ref02">ref02 - désignation</p> <p data-itmref="ref02">xxxxx - votre code </p> </div> </div> [...] </div>

---

Du coups il y a un problème avec tout les div "container" ont le même id, j'ai contourner ça en ajoutant automatiquement un id pour arriver à ce code

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<div id="listresult" class="center"> <div data-itmref="ref01" id="stock_search-form-item-0"> <div data-itmref="ref01">aaaaa</div> <div data-itmref="ref01"><img src="...." data-itmref="ref01"></div> <div data-itmref="ref01"> <p data-itmref="ref01">ref01 - désignation</p> <p data-itmref="ref01">xxxxx - votre code </p> </div> </div> <div data-itmref="ref02" id="stock_search-form-item-1"> <div data-itmref="ref02">bbbbb</div> <div data-itmref="ref02"> <p data-itmref="ref02">ref02 - désignation</p> <p data-itmref="ref02">xxxxx - votre code </p> </div> </div> [...] </div>

---

Mais du coups plus moyen de limiter par l'id pour closest() puisqu'il change à chaque élément. Sauf à ce que puisse intégrer un caractère joker dans closest.

vu que tu as data-itmref="..." partour, pourquoi ne pas juste le recuperer sur l'element ?

Code:

---

1 2 3

document.getElementById('listresult').addEventListener('click', ({target}) => { console.log(target.dataset.itmref); });

---

Parfois les choses les plus simples sont les meilleures ;)

Merci Doksuri.