Question

假设我有一个触发一些javascript的标签。例如：

HTML：

<a href="#" id="some_id">Trigger action!</a>
<!-- or, with appripriate CSS : -->
<span id="some_other_id">Trigger action!</span>

jQuery的：

$("#some_id").click(function() {
   alert("some action") 
});

我如何最好地实现这一目标？

我的问题是，当我将鼠标悬停在链接上时，我应该在浏览器的左下角看到什么？即， href值应该是什么？

如果回答是“无”，那么正确的方法是跨度。

几种方法的示例：http://jsfiddle.net/M3qkU/5/

Answer 1

这取决于您使用的是网页还是网页应用程序。

如果您正在进行网页，请尝试让链接为未启用JavaScript的用户执行有用的操作。这样，JavaScript就是增强页面而不是它完全可用的所需。这称为progressive enhancement。例如：假设您有一个页面，并且您希望它有标签。将选项卡按顺序放在元素中，并为每个选项卡的元素赋予id值。将您带到这些标签的导航链接会在其片段中显示id值（例如，#movies会将您带到movies元素 - 浏览器会为您执行此操作）。然后，当您加载JavaScript时，让它将这些元素转换为标签并接管这些链接的操作。

如果您正在进行Web应用程序，并且该链接在UI中触发“页面更改”或“标签更改”类型的更改，请将其保留为链接并使href成为片段（例如，#movies）描述应用程序在发生时切换到的“页面”或“选项卡”。您甚至可以在处理链接时使用该信息，并且可以在最初加载页面时使用它，以便您的各种页面状态变为可链接。如果“链接”不会导致应用程序中的位置样式更改，则大多数情况下会将其设置为按钮（您可以将button元素设置为非常显着的样式，但我不会将它们设置为看起来像链接）。

Answer 2

两种情况：

如果你有一个可以使用javascript关闭的后备支持（例如，在叠加层中打开的登录表单也可以作为常规页面打开），然后使用{{1} }指向该页面的链接，触发覆盖/ javascript操作的onclick。
如果没有后备的元素，请不要使用<a>（例如触发内联编辑器的内容）

但无论你做什么，都不要使用<a>因为用户将其视为链接的“url”，而且可能会让人感到困惑。

至于<a href="javascript:soemthing()">，我也不建议（即使它被广泛使用），因为如前所述，它并没有指向真实位置。

在这种情况下使用<a href="#">的唯一好处是您获得了手形光标，但您可以在CSS中使用<a>将光标放在非 - cursor:pointer元素。

Answer 3

有很多理论可供选择。矿：

a标记只应在链接到内容时使用。在这种情况下，应该有一个有效的href。在链接内容将在页面上加载的情况下（模态，ajax等），JS会覆盖href并做其事。
页面级别的交互（按钮，可点击的图标等）不应该是链接，因为没有JavaScript，它们没有用处。在这种情况下，他们应使用与a不同的标签。

当然，我一直都在打破这些规则。

从技术上讲，href="#"会导致页面在大多数浏览器中滚动到顶部。如果你使用它，那么你必须小心，总是在你的JS中覆盖href ...这很容易忘记。因此，对于纯javascript交互a标记，我建议使用href="javascript:;"

触发javascript的链接的最佳做法是什么？

3 个答案: