空链接锚点

Question

我有一个锚点，它没有任何实际链接，但是有一个onclick属性（例如<a onclick="..."></a>）。我的问题与href属性有关。我应该把什么值放在href属性中呢？

如果我简单地省略href属性，则该锚点将没有适当的装饰 - 当鼠标悬停在其上时，鼠标指针图标不会更改。

如果我使用href="#"，则在单击链接时窗口将滚动到页面顶部。

如果我使用href="javascript:..."并在javascript:之后放置onclick的值，则在单击链接时页面将离开且地址栏包含Javascript。

当我提到浏览器行为时，我是指Chrome，我首先在其中进行测试。

当锚点不是实际链接而只存在于onclick执行行为时，我应该在href属性中放什么？

- core

Answer 1

理想情况下，您应该为那些禁用了JavaScript的用户提供选项：

<a href="degrade_option.html" onclick="return fancy_option();">do the option!</a>

如果你对那种事情不感兴趣的话，尽管你应该感兴趣，最常见的方法是使用井号但是取消事件以防止默认操作发生，像这样：

<a href="#" onclick="return do_something();">do something</a>

但是你必须确保do_something返回false。（或者你可以在点击处理程序的末尾添加return false;，但这会更加不美观）

虽然说实话，你真的不应该一开始就使用内联JavaScript属性。它们是糟糕的实践，难以维护，并且有更好的替代方案。

编辑：根据您的评论，替代方案是不侵入式JavaScript：

"不侵入式JavaScript"是JavaScript编程语言在互联网上的最新技术。虽然没有正式定义这个术语，但其基本原则通常包括：

• 将功能（“行为层”）与Web页面的结构/内容和演示分离
• 遵循最佳实践，避免传统JavaScript编程的问题（例如浏览器不一致性和缺乏可扩展性）
• 渐进增强以支持可能不支持高级JavaScript功能的用户代理

阅读该页面了解一些示例。

- Paolo Bergantino

---

还有其他选择吗？ - core

Answer 2

在您的onclick处理程序中，将以下内容添加到末尾：

return false;

这将取消默认处理（即跟随链接），您可以在 href 中放置任何内容（# 和其他任何字符一样好用）。

- Jon Grant

Answer 3

<a href="javascript:void(0);" onclick="...">txt</a>

- Colin

---

我原本使用了“#”，但它会附加到URL上，这样用户就无法刷新（F5），所以我很喜欢你的答案。 - Francisco Corrales Morales

Answer 4

如果没有使用href，我更倾向于删除它（根据W3C规范，它不是必需的）。要获得预期的鼠标光标，请使用CSS！

<style type="text/css">
a { cursor: pointer; }
</style>
<a onclick="go();">link</a>

- Jeroen Versteeg

---

我不知道 'href' 不是必须的；感谢您指出来（我甚至去检查了规范！：-）） - gerrod

Answer 5

<a href="javascript:;">Foo</a>

简短、描述性的，不像 # 一样跳跃。

- igl

---

需要分号吗？ - Aneon

Answer 6

有两种方法可以做到这一点，如果链接的id标签是link，您可以在HTML中使用href="#"，然后在JavaScript中使用：

$('#link').click(function(evt) {
 // code goes here
 evt.preventDefault();
});

这会阻止浏览器的正常行为。或者

$('#link').click(function(evt) {
 // code goes here
 return false;
});

- reectrix