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 能在这里提供帮助，我很高兴使用它......

Answer 1

只需返回 true 即可？

onClick 代码的返回值决定了链接的固有点击操作是否被处理 - 返回 false 意味着它没有被处理，但如果您返回 < code>true 那么浏览器将在函数返回后继续处理它并转到正确的锚点。

Answer 2

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

这样

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

，您将执行 youf 函数，并且您将点击该链接，并且您将在函数成功运行后准确点击该链接。

Answer 3

如果链接仅在函数运行成功时才更改位置，则执行 onclick="return runMyFunction();" 并在函数中返回 true 或 false。

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

附带说明一下，您可能应该使用事件处理程序，因为内联 JS 并不是一种非常理想的处理方式。

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'))
})