Estoy tratando de escribir un detector de eventos en una extensión de Chrome que cambia el estilo del enlace cuando el usuario pasa el mouse sobre él.

document.addEventListener("mousemove", function(e) {
     console.log(e.target.tagName);
});

No estoy seguro de si se trata de un problema aislado de la página de resultados de Google, pero muchos de los enlaces de la página no imprimen "A" para el tagName cuando se coloca el cursor sobre él (por ejemplo, los resultados de búsqueda son "H3") . Al inspeccionar la página, parece que "H3" es un elemento secundario de "A", pero realmente me gustaría comprobar si este elemento es <a> en sí mismo o está contenido en <a> , por lo que funciona para todos los enlaces de la página.

¿Hay alguna forma de hacer esto además de tener que buscar a todos los padres en todo el árbol para ver si alguno de ellos es <a>?

0
Jess 16 oct. 2018 a las 17:17

2 respuestas

La mejor respuesta
aTags = document.querySelectorAll('a');
aTags.forEach(a => a.onmouseover => a.style.color = 'green');

Esto logrará lo que está buscando.

0
Darren 16 oct. 2018 a las 14:23

Debes consultar la página para todos los elementos <a> y luego vincularlos a su evento onmouseover.

Debería verse más o menos así:

var links = document.getElementsByTagName('a');
var a;
for(var i = 0;i < links.length;i++){
  a = links[i];
  console.log(a);
  // now you can just:
  // a.addEventListener(....);
}
1
Ronen Cypis 16 oct. 2018 a las 14:27