使用 <a> 标签或任何标签作为 javascript 链接?

Use <a> tags or any tags for javascript links?

提问人:Michael Durrant 提问时间:8/27/2014 最后编辑:RobGMichael Durrant 更新时间:8/27/2014 访问量:72

问:

使用一种而不是另一种有没有首选的方法或优势?

  1. 您可以有一个超链接,其中指向 or 然后指向查找该元素事件的 javascript。ahref#classidon-click

  2. 你可以有一个简单的 div 或 span,其中包含 or 并将 javascript 绑定到该元素。classidon-click

我已经看到两者都完成了。

上下文是使用 javascript 实现某些功能的 ruby on rails 应用程序。

javascript html ruby-on-rails 不显眼的javascript

评论

0赞 mplungjan 8/27/2014
如果您不想点击链接,请记住 onclick。stackoverflow.com/questions/1291942/......return false
0赞 Michael Durrant 8/27/2014
这与(或更新的)相似吗?preventDefault()defaultPrevented
0赞 RobG 8/27/2014
带有 hrefs 的元素会自动添加到 document.links 集合中,脚本化链接不会。
0赞 mplungjan 8/27/2014
defaultPrevented告诉您preventDefault在对象上是否处于活动状态。preventDefault() 类似于返回 false。stackoverflow.com/questions/1357118/......
0赞 mplungjan 8/27/2014
@RobG - 你指的是什么样的链接?这个工作 jsfiddle.net/mplungjan/xmsh0aaa

答:

4赞 James P 8/27/2014 #1

我认为使用标签的主要优点是默认行为(当包含 时)是浏览器光标表示链接。虽然两者都可以做到,但使用标签也更具语义性。<a>href<a>

评论

0赞 Michael Durrant 8/27/2014
+1 谢谢。我想知道它是否根据所完成的功能类型而有所不同。也许在某些情况下,翻转和(例如)手形符号会遮挡内容。虽然我现在想不出一个具体的例子。在适当的时候,标签可能具有(?)替代文本和标题在翻转和屏幕阅读器方面的大优势?
2赞 cgatian 8/27/2014 #2

构造语义标记是优秀设计的主要内容。通过使用锚点来表示导航,您正在遵守规范。规范概述的方式,如果您需要偏离,我会确保您的更改是合理的。

首选锚标记的一个优点是盲人的屏幕阅读器软件将解析锚点的 DOM,以帮助用户在页面上导航。通过使用 div 或 span,导航链接将被忽略。

0赞 aymericbeaumet 8/27/2014 #3

我喜欢写一些真正有意义的代码。我通常通过使用最合适的(从语义上讲)元素来实现这一点。

  • 当目的是在应用程序中导航时,我使用该元素。引用规范a

链接是一种概念结构,表示两个资源之间的连接 [...]

  • 对于其他情况,这取决于。但我通常使用元素button

  • div根据定义是没有意义的,您应该出于这种目的避免它们。引用规范

强烈建议作者将 div 元素视为最后的手段,以便在没有其他元素合适的情况下使用。

1赞 RobG 8/27/2014 #4

这更像是一个 HTML 问题,而不是 javascript。

  1. 元素很简单,可以在每个浏览器中工作,并且无论脚本是否可用,都是完全可靠的。
  2. 浏览器通过上下文菜单功能支持 A 元素,以在新窗口或选项卡中打开它们
  3. 元素在浏览器中具有默认的表示形式,让用户知道它们是链接,而无需任何其他脚本或样式支持
  4. 不同的浏览器显示链接可能略有不同,因此用户习惯于看到它们以浏览器呈现的特定方式运行。脚本化和样式化的其他元素可能会以不熟悉的方式呈现给至少某些用户。
  5. 浏览器提供了支持 A 元素链接的功能,例如链接之间的选项卡导航和页面中单独的链接列表。
  6. 屏幕阅读器和其他辅助功能支持机制可以理解 A 元素链接,并可以将其呈现给用户
  7. 浏览器通常会向用户显示 A 元素链接的目标,以便他们决定是否关注该链接
  8. 元素 URL 可以轻松复制和共享,而无需点击链接
  9. 元素可用于创建书签,而无需点击链接

脚本化和样式化链接不具备上述任何功能,或者至少需要大量额外工作来支持其中任何功能。

0赞 Moob 8/27/2014 #5

如果它是一个仅限 JavaScript 的链接,那么你附加它是什么元素并不重要,但使用 a 会给你内置的链接/悬停/访问样式,同时在语义上是正确的。但是,使用实际链接的最大原因是能够为未启用 JS 的浏览器提供回退。<a>

例如,如果可能的话,你可以有一个链接,如果可能的话,它通过ajax加载接下来的10个结果,或者如果遵循该链接,则在服务器端加载。

<a id="nextByAjax" href="?next=10">Next 10</a>