HTML锚链接 - href和onclick两者都有吗？

Question

我想编写一个锚点标签，执行一些JavaScript代码，然后继续前往href指定的位置。调用执行JavaScript并将window.location或top.location设置为href位置的函数不适用于我的情况。

所以，假设页面上有一个ID为“Foo”的元素。我想编写一个类似下面的锚点标签：

<a href="#Foo" onclick="runMyFunction(); return false;">Do it!</a>

当单击时，我想执行runMyFunction函数并跳转页面到#Foo（不重新加载页面-使用top.location会导致重新加载页面）。有什么建议吗？如果能帮助的话，我很乐意使用jQuery...

- psychotik

---

“return true;”是解决方案，但您也可以调用“location.hash = '#Foo'”。它不会重新加载页面。 - shuangwhywhy

Answer 1

只需要返回 true 吗？

onClick 代码的返回值决定了链接在被点击后是否会被处理。返回 false 意味着它不会被处理，但如果你返回 true，那么浏览器将在函数返回后继续处理并跳转到相应的锚点。

- Amber

---

如果 onclick 没有返回任何内容会怎样？ - maciek

如果@maciek的返回值被视为“未定义”，则在这些情况下被认为是假的。 - Amber

过去，每当我使用js函数启动新页面，并仅将“＃”用作href属性时，我会返回“-1”以防止默认操作，通常是浏览器跳转到页面顶部，有时我只是不返回任何内容。最近，根据@Amber的建议，我不得不修改所有这些页面...如果我不想页面跳转，就明确返回false。 - Randy

看起来，如果 onclick 没有返回任何内容，链接的内在点击行为将被处理。 - iplus26

同时，在点击事件处理程序中不应使用event.preventDefault()。 - Ruben

@Ruben，您能否解释一下为什么在单击事件处理程序中不应使用event.preventDefault()？ - David Maness

Answer 2

<a href="#Foo" onclick="return runMyFunction();">Do it!</a>

和

function runMyFunction() {
  //code
  return true;
}

这样，您将执行您的函数，并且您将跟随链接，且在成功运行您的函数后立即按照链接进行跟随。

- n1313

---

如果您的函数在延迟函数调用后返回 true，似乎无法正常工作？ - DavidVdd

如果我点击“在新标签页中打开链接”，这个功能就无法正常工作。 - Albos Hajdari

Answer 3

如果链接只有在函数成功运行后才能更改位置，则可以使用 onclick="return runMyFunction();" ，然后在函数中返回true或false。

如果您只想运行该函数，然后让锚标签完成其工作，请删除return false语句。

顺便说一句，最好使用事件处理程序，因为内联JS不是做事情的最佳方式。

- peirix

Answer 4

在进行清理 HTML 结构时，你可以这样做。

const element = document.getElementById('link_1')
element.onClick = function (e) {
    e.preventDefault()
    window.open('_top', element.getAttribute('href'))
}

使用jQuery

$('a#link_1').click(function (e) {
    e.preventDefault()
    const a = e.target
    window.open('_top', a.getAttribute('href'))
})

- Carl James Omandam

---

你在所有可以加空格的地方都加了空格，但是在 // 后面不加空格，这真的很有趣。 - user3064538

很抱歉我的语法不太好，我已经修复了它，使其符合当前的JavaScript标准。 - Carl James Omandam