代码之家 › 专栏 › 技术社区 › Kotaka Danski

阻止`<a>`标记重定向

href hyperlink html javascript

Kotaka Danski · 技术社区 · 2 年前

我正在尝试用音乐播放器创建一个单页应用程序。这就是为什么我想阻止 <a> 标签重定向,这反过来又导致玩家停止。我尝试了几种方法,例如:

document.addEventListener('click', event => {
    if (event.target.tagName === 'A') {
        event.preventDefault();
        navigate(event.target.href);
    }
});

或

document.addEventListener('DOMContentLoaded', () => {
    const links = document.querySelectorAll('a');
    links.forEach(link => {
        link.addEventListener('click', event => {
            event.preventDefault();
            navigate(event.target.href);
        });
    });
});

或

<body onload="preventRedirect()">...</body>

function preventRedirect(){
    const links = document.querySelectorAll("a");
    links.forEach(link => {
        link.addEventListener("click", event => {
            event.preventDefault();
            navigate(link.href);
        })
    })
}

这两者都不起作用。然而,奇怪的是,如果我手动执行该函数或在控制台中添加事件侦听器,一切最终都会按预期进行。我知道我应该使用按钮,但那会破坏我设计的美观性。我已尝试设置 href s到“#”并使用 onclick 导航,这很有效,但很乏味,我希望我最初的想法最终能够奏效。

1 回复 | 直到 2 年前

KooiInc 2 年前

尝试使用 event delegation 以在文档级别上创建处理程序。它类似于您的第一个代码片段。也许使用 navigate (一 experimental technology )是这不起作用的罪魁祸首。它会抛出一个错误,因为你不能那样使用它(它应该是 [window].navigation.navigate(...) ,但使用它会跟随链接)。

document.addEventListener(`click`, handle);

function handle(evt) {
  if (evt.target.closest(`a`) /* && possible other conditions */) {
    console.clear();
    console.log(`will not follow ${evt.target.href}`);
    evt.preventDefault();
    /* possibly more code */
    return false;
  }
}

<p><a href="https://www.google.com">(non clickable) link to Google</a></p>
<p><a href="https://www.microsoft.com">(non clickable) link to Microsoft</a></p>