JavaScript：获取多个<a>标签的href值

Question

在不使用jQuery 或任何其他库的情况下，objective 是通过警报事件通知用户URL 将访问哪个。在标记中，有多个 <a> 标签，每个标签具有不同的 href 值，当用户单击 <a> 标签时，会显示一个 alert 事件，提示用户要去哪里在真正离开网站之前。

工作流程：

文档加载
用户点击了一个 <a> 标签
一个 alert 事件与被点击的 <a> 标签的 href 值一起显示
用户关闭 alert 事件后，浏览器开始加载 href 网站

代码示例：

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>

Objective:

为所有 <a> 标签动态设置 JavaScript 以实现每个标签的工作流输出（以及具有相同 [=26] 的任何其他 <a> 标签=] 可能包含在文档中）。请注意，目前只有 Link A 可以正常工作。

感谢您编写解决此问题的代码！

Answer 1

使用querySelectorAll()获取所有锚标签，然后循环遍历它们并addEventListener()而不是onclick，因为onclick只能分配给一个元素一个时间。此外，您可以使用 e.target.href 获取 href。 e.target 是开始事件的元素。

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>

Answer 2

querySelector 只会匹配匹配选择器的 first 元素。您可以使用 querySelectorAll 来匹配所有这些元素，将侦听器添加到 all 中...

或

将一个侦听器附加到容器（event delegation 允许它从其子项“冒泡” DOM 时捕获事件。单击子元素时，处理函数会检查它是否具有 .link class 的锚点，然后执行其余代码。

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>

JavaScript：获取多个<a>标签的href值

JavaScript: get href value of multiple <a> tags

javascript

html