带有 Javascript onclick 事件的 HTML 锚标记

Question

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

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

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

它通常会在不触发

show_more_menu()

的情况下转到“more.php”，但我已经在该页面本身显示了一个菜单。怎么做像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

不确定这是否是您要查找的内容，但您可以使用添加

role="link"

的 div 重新创建锚标记，这没有

href

但同时从 SEO 的角度来看应该没问题

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