Sin usar jQuery ni ninguna otra biblioteca, el objetivo es informar al usuario qué URL visitará con un evento de alerta. En el marcado, hay varias etiquetas <a> con diferentes valores href para cada una, cuando el usuario hace clic en la etiqueta <a> , se muestra un evento de alert que menciona a dónde se dirige el usuario antes de abandonar el sitio web.
Flujo de trabajo:
<a>alert con el valor href de la etiqueta <a> en la que se hizo clicalert , el navegador comienza a cargar el sitio web de hrefEjemplo de código:
document.querySelector('a').onclick = function(e) { e.preventDefault(); var href = document.querySelector('a').href; alert('You are going to: ' + href); window.location = href; } <div id="container"> <a class="link" href="https://www.microsoft.com/">Link A</a> <a class="link" href="https://www.google.com/">Link B</a> <a class="link" href="https://www.apple.com/">Link C</a> </div>Objetivo:
<a> para lograr la salida del flujo de trabajo para cada una de ellas (y para cualquier otra etiqueta <a> con la misma class que pueda incluirse en el documento). Tenga en cuenta que solo el enlace A funciona como se desea hasta ahora.¡Se agradece su codificación para resolver esto!
Use querySelectorAll() para obtener todas las etiquetas de anclaje, luego revíselas y addEventListener() en lugar de onclick , porque onclick solo se puede asignar a un elemento a la vez. Además, puede tomar el href con e.target.href . e.target es el elemento sobre el que se actuó para iniciar el evento.
document.querySelectorAll('a').forEach(function(el) { el.addEventListener("click", function(e) { if (e.target.matches('.link')) { e.preventDefault(); var href = e.target.href; alert('You are going to: ' + href); //window.location = href; } }) }) <div id="container"> <a class="link" href="https://www.microsoft.com/">Link A</a> <a class="link" href="https://www.google.com/">Link B</a> <a class="link" href="https://www.apple.com/">Link C</a> </div>querySelector solo coincidirá con el primer elemento que coincida con el selector. Puede usar querySelectorAll para hacer coincidir todos esos elementos, agregar oyentes a todos ellos...
O
Adjunte un oyente al contenedor (la delegación de eventos le permite capturar eventos de sus hijos a medida que "hacen burbujas" en el DOM). Cuando se hace clic en un elemento secundario, la función del controlador verifica que sea un ancla con una clase .link y luego ejecuta el resto del código.
const container = document.querySelector('#container'); container.addEventListener('click', handleClick); function handleClick(e) { if (e.target.matches('.link')) { e.preventDefault(); const { href } = e.target; alert(`You are going to: ${href}`); window.location = href; } } <div id="container"> <a class="link" href="https://www.microsoft.com/">Link A</a> <a class="link" href="https://www.google.com/">Link B</a> <a class="link" href="https://www.apple.com/">Link C</a> </div>