带有Javascript onclick事件的HTML锚标记

Question

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

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

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

它通常会在没有触发的情况下进入'more.php' show_more_menu(),但我在该页面中显示了一个菜单.谷歌怎么办？

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>