HTML 锚链接 - href 和 onclick 两者？答案

【问题标题】：HTML anchor link - href and onclick both?HTML 锚链接 - href 和 onclick 两者？
【发布时间】：2010-11-23 16:20:27
【问题描述】：

我想编写一个锚标记，它执行一些 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...

【问题讨论】：

return true; 是解决方案，但您也可以致电location.hash = '#Foo'。它不会重新加载页面。

标签： javascript jquery html anchor

【解决方案1】：

当做一个干净的 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'))
})

【讨论】：

你把空格放在所有你能做到的地方，但在//之后却没有，这对我来说真的很有趣
我很抱歉我的语法不好，我已修复它以使其符合当前的 javascript 标准。

【解决方案2】：

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

和

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

通过这种方式，您将执行您的函数，您将点击链接，并且您将在您的函数成功运行后完全点击链接。

【讨论】：

如果您的函数在延迟函数调用后返回 true，似乎不起作用？

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

只是return true 吗？

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

【讨论】：

如果 onclick 没有返回任何东西怎么办？
@maciek 然后返回值被视为undefined，出于这些目的，这被认为是错误的。
过去每当我使用 js 函数来启动一个新页面，并且只为 href 属性添加一个“#”时，我会返回“-1”以防止默认动作，通常是浏览器跳到页面顶部，或者有时我不会返回任何内容。最近我不得不按照@Amber 的建议修改所有这些页面......如果我不想让页面跳转，则专门返回 false。
@Amber 似乎如果 onclick 没有返回任何内容，则会处理链接的固有点击操作。
@Ruben 你能解释一下为什么你不应该在点击事件处理程序上使用 event.preventDefault() 吗？