Récupérer le véritable lien

Par Eric237, il y a 5 ans

Les bases HTML/CSS
Javascript

Bonsoir, j'ai un code un peut comme ceci:

document.body.addEvenrListener('click', function(e) { const el = e.target if (el.classList.contains('app') { console.log(el) } }) /* HTML */ <a href="mon lien" class="app">Lien 1</a> <a href="mon lien" class="app"> <i class="icon-1"></i> <img src="image"> Lien 2 <i class="icon-2"></i> </a>

Pour le lien 1 tous fonctionne bien, mais lorsque le lien contient d'autres éléments HTML (img, i, span etc.) le target me renvoie l'un des éléments HTML enfant.

Moi je veux pourvoir récupérer uniquement le lien parent peut importe le nombre d'enfant qu'il contient. j'aurais bien pu faire des parentNode mais tous les liens n'ont pas la même structure.

Actuellement je me voir bien faire e.path et récupérer le lien compris dans le tableau, mais c'est pas obtimale je pense.

Merci de m'aider si vous avez une solution.

11 réponses

Eric237, il y a 5 ans

Voilà le code

function getLink(e) { e.preventDefault(); // this fera référence au lien cliqué, apres tu fais ce que tu veux avec console.log(`the url of link is ${this.getAttribute("href")}`); } fonction callLink () { const liens = document.querySelectorAll(".lien"); liens.forEach((el) => el.addEventListener("click", getLink)); } callLink();
Pierrot01, il y a 5 ans

Comme ça ;)

<a href="mon lien" class="app lien">Lien 1</a> <a href="mon lien" class="app lien"> <i class="icon-1"></i> <img src="image"> Lien 2 <i class="icon-2"></i> </a> var liens = [].slice.call(document.getElementsByClassName("lien")); liens.forEach(function (element, index){ element.addEventListener("click", function(e){ e.preventDefault(); console.log("you clicked slider controler " +index + "!"); }); });

Voir ici
a++

Eric237, il y a 5 ans

Bonjour, merci déjà pour ta réponse.

En partant du principe que le contenu de cette page est chargé de façon asynchrone, cette méthode vas prendre en compte les liens des nouveaux contenus ?

Eric237, il y a 5 ans

Je viens de tester le code mais il ne fonctionne pas vraiment.

Mickael Christine, il y a 5 ans

Salut essaie plutot ceci

const liens = document.querySelectorAll(".lien"); function getLink(e) { e.preventDefault(); // this fera référence au lien cliqué, apres tu fais ce que tu veux avec console.log(`the url of link is ${this.getAttribute("href")}`); } liens.forEach((el) => el.addEventListener("click", getLink));
Pierrot01, il y a 5 ans

Tu sais ou tu fais tes modifs dans ta page ?
tu met ce code dans une fonction et tu la rappelle après avoir ajouté tes liens supplémentaires ;)

@pluche

Pierre

Eric237, il y a 5 ans

La méthode de @Mickael Christine fonctionne bien, mais maintenant me sousis c'est que les nouveaux liens avev la classe "lien" ne fonctionne pas.

Pierrot01, il y a 5 ans

bah, tu rappelles callLink et l'affaire est réglée ;)

a++

Eric237, il y a 5 ans

En rappelant juste à là fin, ca fait n'importe quoi. Ça ne fonctionne pas tout à faif comme prévu :

function getLink(e) { e.preventDefault(); console.log(`the url of link is ${this.getAttribute("href")}`); callLink(); } fonction callLink () { const liens = document.querySelectorAll(".lien"); liens.forEach((el) => el.addEventListener("click", getLink)); } callLink();
Pierrot01, il y a 5 ans

tu rappelles la fonction après avoir fais ton appel ajax qui a ajouté ou enlevé des liens ;)

fonction callLink () { const liens = document.querySelectorAll(".lien"); liens.forEach((el) => el.addEventListener("click", getLink)); } maFonctionQuifaitAppelAjax(){ appelAjax(param).done( RafraichitPartielPage(); callLink(); }

a++

Pierre

Eric237, il y a 5 ans

Merci pour vos messages.

Actuellement voila le code que j'ai ecrit, il a le merite de fonctionner sur tous les navigateurs que j'ai testé mais je le trouve plutot lourd et pas optimisé.

document.body.addEventListener('click', function(e) { let element = e.target; while (element) { if (element.classList.contains('js-app-link')) { e.preventDefault(); appLink(element); element = false; break; } else if (element.tagName === "BODY") { element = false; break; } else { element = element.parentNode; } } });