Récupérer le véritable lien

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++

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 ?

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

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

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

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.

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

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

a++

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

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

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