带有JavaScript onclick事件的HTML锚点标签

Question

我在谷歌上查询时发现他们在锚标签中使用onclick事件。

在谷歌页眉的更多选项中，它看起来像是普通的a标签，但点击它不会重定向而是打开一个菜单。通常当使用

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

通常情况下，它会跳转到'more.php'页面且不触发show_more_menu()函数，但我在该页面上显示了一个菜单。如何像谷歌一样实现呢？

- smartkid

Answer 1

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

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

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

无论如何，Google 是否这样做并不重要。更干净的做法是在 JavaScript 中绑定您的 onclick 函数，这样可以将 HTML 与其他代码分开。

- TJHeuvel

---

为了更加确保，可以在 href="#" 中使用 # 并在 JavaScript 中执行必要的操作。点击这个带有 # href 的链接是安全的，页面不会离开/重新加载 URL。 - Bimal Poudel

请谨慎遵循以上建议，因为HTML5规则明确规定href="#"应该导航到页面顶部。您可以简单地添加没有内容的href属性，并获得单击行为。将#分配为真实页面的URL（而不是单页100％高度的应用程序）通常是一个不好的主意。 - Mike 'Pomax' Kamermans

只是一个提醒，在绑定CSS类到元素并在单独的CSS文件中指定详细样式的方式相同，将内联事件处理程序函数绑定到元素，然后在单独的JS文件中指定该函数的详细实现也是完全可以的。您的HTML文件是声明网页结构、外观和行为的地方。详细实现位于其他地方。这才是您真正想要的分离方式。 - Sarsaparilla

函数能够检查传递的变量吗？例如 check('123')。 - Han Whiteking

Answer 2

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

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

- sun2

---

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

Answer 3

据我理解，您不希望在链接被点击时进行重定向。

您可以这样做：

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

- Aditya Manohar

---

当您不想使 href 指向任何地方时，这非常有用。 - kbpontius

它很酷，也能正常工作，但 jQuery 报错：“错误：语法错误，无法识别的表达式：javascript:;”。 - TheOddCoder

我正在使用jQuery版本1.10.2，而且我没有遇到@TheOddCoder所经历的语法错误。 - Mike Finch

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>

- Kamil Kiełczewski

---

这个方法很有效，谢谢。 - Uriahs Victor

有没有规范明确说明为什么 event 可以神奇地工作，但 evt 却不行？ - James Irwin

@JamesIrwin 在我的代码中我没有使用 event - 我认为你可以在 Stack Overflow 上创建一个新的问题并询问。 - Kamil Kiełczewski

Answer 5

还有一种解决方案，即使 javascript 函数返回任何值，也可以防止默认操作。

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

- Nandha

Answer 6

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

- Sandeep Jain

---

请阅读如何撰写好的答案？。虽然这个代码块可能回答了OP的问题，但如果您解释一下这段代码与问题中的代码有何不同，您做出了哪些更改，为什么要更改以及为什么这样解决问题而不引入其他问题，那么这个答案将会更加有用。- 来自审核 - Saeed Zhiany

Answer 7

不确定这是否符合您的需求，但您可以通过添加role="link"来使用

重新创建锚点标签，虽然它没有href，但从SEO角度来看应该是可以的。

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

- Gianmarco