preventDefault() 点击链接的事件我想停止重新加载页面而不是所有链接

Question

 const preventReloadLinks = container.querySelectorAll('.leftnav-link');
  preventReloadLinks.forEach(link => {
   addEventListener('click', function (e) {
     e.preventDefault()
    });
   })

大家好我正在使用这段代码来停止导航中的链接导致页面重新加载，它有效但不幸的是它停止（阻止）点击我页面上的其他链接到我希望它们的外部页面work.I 尝试了更具体的选择器，但还是一样。我怎样才能停止这种行为或为其他链接扭转它。谢谢

Answer 1

在您创建的链接中添加另一个自定义 class，在国外链接中必须没有。

然后修改自定义的querySelector() class

Answer 2

您的代码为导航中的每个 link 添加了一个 eventListener 到 window。

addEventListener('click', function (e) { // same as window.addEventListener
   e.preventDefault()
});

所以你错过了link.，代码应该是

link.addEventListener('click', function (e) {
   e.preventDefault()
});

但我建议改为委托，这样你就不必循环

container.addEventListener('click', function (e) {
  const tgt = e.target.closest("a"); // or just e.target if there are no child elements in the link 
  if (tgt && tgt.classList.contains("leftnav-link")) { 
     e.preventDefault()
  }   
})

Answer 3

const preventReloadLinks = document.querySelectorAll('.leftnav-link');
for (let i = 0; i < preventReloadLinks.length; i++) {
    preventReloadLinks[i].onclick = () => false;
}

preventDefault() 点击链接的事件我想停止重新加载页面而不是所有链接

preventDefault() click event for links what I want to stop to reload page not all links

javascript

dom-events

preventdefault