Necesito establecer el valor de una variable en función de la href de un enlace cliqueado.

Sé que puedo configurar la variable usando un detector de eventos que ejecutaría esto cuando se haga clic en el enlace

var x = document.getElementById("myAnchor").href

Pero eso se establece en un solo elemento. Necesito que funcione dinámicamente según el enlace en el que se hace clic. Por ejemplo:

<a href="/link1">Partner A</a>
<a href="/link2">Partner B</a>
<a href="/link3">Partner C</a> 
// function to attach click event to all links
function attachClickEvent() {
  var linklist = document.getElementsByTagName('a');
  var listLength = linklist.length;
  var i = 0;
  for (; i < listLength; i++) {
    linklist[i].addEventListener("click", ClickedLinkEvent);
  }
}

window.onload = attachClickEvent;

// function that creates click event
function ClickedLinkEvent() {
  var anchor = obj.href;
  console.log(anchor);
  if (anchor.includes('clientdomain')) {
    //do nothing
  } else {
    SendLinkEvent();
  }
}

// function to run on click event
function SendLinkEvent() {
  ga('send', {
    hitType: 'event',
    eventCategory: 'Affiliate Link',
    eventAction: 'Click',
    eventLabel: anchor
  });
}

La variable de anclaje debe establecerse en / link1 si se hace clic en Partner A, pero / link2 si se hace clic en Partner B.

Entonces, ¿hay alguna manera de hacer esto con vanilla JS?

0
Megan Perry-Thibault 13 feb. 2020 a las 20:31

2 respuestas

La mejor respuesta

Si ajusta la declaración del método ClickedLinkEvent y agrega un argumento a la firma del método, tendrá el objeto de evento. El objeto de evento tiene un parámetro target . Si te entendí correctamente, esto es lo que necesitas. Tu no?

function ClickedLinkEvent(e) {
    console.log('hello', e);
    var anchor = e.target.href;
    console.log(anchor);
    if (anchor.includes('clientdomain')){
       //do nothing
    }
    else {
         SendLinkEvent(anchor);
    }
}
3
SaWo 13 feb. 2020 a las 17:47

Puede establecer atributos personalizados para un elemento como este:

<a href="..." id="myAnchor" data-partner="your_important_data_here">Link A</a>

Luego, en su archivo js:

var data_partner= document.getElementById('myAnchor').getAttribute('data-partner');
0
Leandro Matilla 13 feb. 2020 a las 17:50