为什么点击锚标签没有先访问链接？

Question

For the following code:

 links.addEventListener("click", e => { const a = e.target.closest("a"); if (!a) return; const confirmation = confirm(`Go to ${a.href}?`); if (!confirmation) e.preventDefault(); });

 <div id="links"> <p>Lorem ipsum dolor sit <a href="https://wikipedia.org">Wikipedia</a> consectetur adipisicing elit. Molestias temporibus <a href="https://developer.mozilla.org/en-US/"><i>Mozilla Developer Network (MDN)</i></a> labore eveniet dolor sunt soluta voluptate quas. Reprehenderit, quam voluptatem.</p> </div>

Why doesn't a click on the a tag first visit the link but just opens the confirm which is defined in my javascript file?

Answer 1

您需要修改您的JS代码，首先阻止链接的默认行为然后要求确认，如果结果为真，您可以使用window.location ，有一个类似的问题可以为您提供更多信息： 通过添加点击事件addEventListener 从超链接确认导航

Answer 2

The reason your a tag does not go to the href is because the eventListener gets priority. Try this code instead:

links.addEventListener("click", e => {
  const a = e.target.closest("a");
  a.preventDefault()
  if (!a) return;

  const confirmation = confirm(`Go to ${a.href}?`);

  if (confirmation){ 
    window.location.assign(a.href); 
  }
});