HTML 锚标签与 Javascript onclick 事件

Question

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

在 google header 部分的更多选项中，它看起来像一个普通的标签，但是点击它并没有被重定向而是打开了一个菜单。 通常在使用时

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

它通常会在不触发show_more_menu()的情况下转到“more.php”，但我已经在该页面本身中显示了一个菜单。 怎么做像谷歌？

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

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

Answer 6

即使javascript function 返回任何值，也可以防止默认操作的另一种解决方案。

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