删除指向外部站点链接的点击 EventListener

问题描述 投票:0回答:1

我正在尝试向我的网站添加香草页面过渡。

我添加的 js(见下文)正在与我的所有锚点一起使用,但我想知道是否有一种方法可以将链接定位到具有

target="_blank"
或我可以定义的类的外部页面,因此该功能将不起作用这些链接。

// PAGE TRANSITION
window.onload = () => {
  const anchors = document.querySelectorAll('a');
  const transition_el = document.querySelector('.transition');

  setTimeout(() => {
    transition_el.classList.remove('is-active');
  }, 350);

  for (let i = 0; i < anchors.length; i++) {
    const anchor = anchors[i];

    anchor.addEventListener('click', e => {
      e.preventDefault();
      let target = getLink(e);

      console.log(transition_el);

      transition_el.classList.add('is-active');

      console.log(transition_el);

      setInterval(() => {
        window.location.href = target;
      }, 350);
    })
  }
}

function getLink(e) {
  if (e.target.hasAttribute("href"))
    return e.target.href;
  var parent = e.target.parentNode;
  while (parent != null && typeof parent.tagName != "undefined") {
    if (parent.hasAttribute("href"))
      return parent.href;
    parent = parent.parentNode;
  }
  return null;
}

现在,事件忽略我的

target="_blank"
,进行转换并在同一选项卡中打开链接。有没有一种方法可以检查链接是否是外部链接而不进行转换?

附言。函数 getLink(e) 只是为了让我不会因为其中包含其他内容的锚点而出现未定义的错误。

javascript html click anchor addeventlistener
1个回答
0
投票

使用非选择器排除目标

document.querySelectorAll('a:not([target="_blank"])').forEach(a => a.classList.add('test'));
a.test {
  background-color: yellow;
}
<a href="//example.com">A</a>
<a href="//example.com">A</a>
<a href="//example.com" target="_blank">B</a>
<a href="//example.com" target="_blank">B</a>
<a href="//example.com">A</a>

© www.soinside.com 2019 - 2024. All rights reserved.