带有Javascript onclick事件的HTML锚标记

Posted 2021-03-26

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

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

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

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

答案

如果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与其他代码分开了。

另一答案

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

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

另一答案

根据我的理解，您不希望在单击链接时重定向。你可以做 ：

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

另一答案

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

function show_more_menu(e) {
  if(!confirm('Do you want to go to: '+e.target.href)) e.preventDefault();;
}

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

以上是关于带有Javascript onclick事件的HTML锚标记的主要内容，如果未能解决你的问题，请参考以下文章

使用带有jQuery或Javascript的按键触发“按钮onClick”

引导寻呼机 onclick 事件

带有时间和事件的 JavaScript 逻辑 [关闭]

将所有 onclick 更改为事件侦听器

js 动态添加的按钮 onclick事件怎么写？

带有 Onclick 的自定义按钮，隐藏 Onclick 事件