具有Javascript onclick事件的HTML锚标记

86

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

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

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

通常不会触发就转到“ more.php” show_more_menu()，但是我已经在该页面中显示了一个菜单。谷歌怎么样？

— 聪明的孩子
source

116

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

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

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

无论哪种方式，谷歌是否这么做都不是很重要。将onclick函数绑定到javascript中更干净-通过这种方式，您可以将HTML与其他代码分开。

— TJ赫维尔
source

3

1.更确定的是，在href =“＃”中使用＃，然后在javascript中执行必要的操作。使用＃href可以安全地单击该链接；该页面确实离开/重新加载网址。

— Bimal Poudel，2015年

3

请谨慎遵循上述建议，因为HTML5规则明确指出href="#"应该导航到页面顶部。您可以简单地添加href没有内容的礼物，并获得点击行为。#对于实际页面（而不是单页100％高的应用程序），将其作为URL进行链接通常是一个坏主意。

— Mike'Pomax'Kamermans

54

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

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

— 太阳2
source

1

警告：如果函数返回任何显式值（例如：return null;，但不是return;），则在某些浏览器（如FireFox）中会产生意想不到的后果。该页面将用字符串格式（例如：）的返回值替换所有内容[object Object]。

— rannmann '16

45

据我了解，单击链接后您不希望重定向。你可以做：

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

— 阿迪亚·马诺哈（Aditya Manohar）
source

3

当您不希望href指向任何地方时，这很有用。

— kbpontius

它很酷，可以运行，但是jquery抛出错误“错误：语法错误，无法识别的表达式：javascript :;”

— TheOddCoder

我正在使用jQuery 1.10.2版，但没有得到@TheOddCoder遇到的语法错误。

— Mike Finch

1

使用以下代码显示菜单，而不是转到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>

展开摘要

— 卡米尔（KamilKiełczewski）
source