Discussion :

[flipflip]

Bonjour à tous,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[flipflip]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[flipflip]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Doksuri]

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[flipflip]

Parfois les choses les plus simples sont les meilleures

Merci Doksuri.