带有 Javascript onclick 事件的 HTML 锚标记

Question

在使用 Google 时，我发现他们在锚标记中使用 onclick 事件。

在谷歌标题部分的more选项中，它看起来像普通的标签，但点击它不会被重定向，而是打开一个菜单。通常，使用时

<a href='more.php' onclick='show_more_menu()'>More >>></a>

它通常会转到“more.php”而不触发 show_more_menu()，但我在该页面本身中显示了一个菜单。如何像google那样做？

Answer 1

如果您的 onclick 函数返回 false，则默认浏览器行为将被取消。因此：

<a href='http://www.google.com' onclick='return check()'>check</a>

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

无论哪种方式，谷歌是否这样做并不重要。在 javascript 中绑定 onclick 函数会更干净 - 这样您就可以将 HTML 与其他代码分开。

Answer 2

您甚至可以尝试以下选项：

<a href="javascript:show_more_menu();">More >>></a>

Answer 3

据我了解，您不想在单击链接时重定向。

你可以这样做：

<a href='javascript:;' onclick='show_more_menu();'>More ></a>

Answer 4

使用以下代码显示菜单，而不是转到 href 地址

function show_more_menu(e) {
  if( !confirm(`Go to ${e.target.href} ?`) ) e.preventDefault();
}

<a href='more.php' onclick="show_more_menu(event)"> More >>> </a>

Answer 5

另一种解决方案可以防止默认操作，即使 javascript 函数返回任何值也是如此。

<a href="www.any-website.com" onclick='functionToRun();return false;'>

Answer 6

1) Link to work
<a href="#" onClick={this.setActiveTab}>
      ...View Full List
                    </a>
  setActiveTab = (e) => {
    e.preventDefault();
    console.log(e.target);
}

Answer 7

不确定这是否是您正在寻找的内容，但您可以使用 div 添加 role="link" 重新创建锚标记，这没有 href 但位于同时从SEO的角度来看应该没问题

<div tabindex="0" role="link" aria-label="Example Link" onclick="show_more_menu()">
  Click to navigate
</div>