提问人:Michael Durrant 提问时间:8/27/2014 最后编辑:RobGMichael Durrant 更新时间:8/27/2014 访问量:72
使用 <a> 标签或任何标签作为 javascript 链接?
Use <a> tags or any tags for javascript links?
问:
使用一种而不是另一种有没有首选的方法或优势?
即
您可以有一个超链接,其中指向 or 然后指向查找该元素事件的 javascript。
a
href
#
class
id
on-click
你可以有一个简单的 div 或 span,其中包含 or 并将 javascript 绑定到该元素。
class
id
on-click
我已经看到两者都完成了。
上下文是使用 javascript 实现某些功能的 ruby on rails 应用程序。
答:
我认为使用标签的主要优点是默认行为(当包含 时)是浏览器光标表示链接。虽然两者都可以做到,但使用标签也更具语义性。<a>
href
<a>
评论
构造语义标记是优秀设计的主要内容。通过使用锚点来表示导航,您正在遵守规范。规范概述的方式,如果您需要偏离,我会确保您的更改是合理的。
首选锚标记的一个优点是盲人的屏幕阅读器软件将解析锚点的 DOM,以帮助用户在页面上导航。通过使用 div 或 span,导航链接将被忽略。
我喜欢写一些真正有意义的代码。我通常通过使用最合适的(从语义上讲)元素来实现这一点。
- 当目的是在应用程序中导航时,我使用该元素。引用规范:
a
链接是一种概念结构,表示两个资源之间的连接 [...]
对于其他情况,这取决于。但我通常使用元素
button
div
根据定义是没有意义的,您应该出于这种目的避免它们。引用规范:
强烈建议作者将 div 元素视为最后的手段,以便在没有其他元素合适的情况下使用。
这更像是一个 HTML 问题,而不是 javascript。
- 元素很简单,可以在每个浏览器中工作,并且无论脚本是否可用,都是完全可靠的。
- 浏览器通过上下文菜单功能支持 A 元素,以在新窗口或选项卡中打开它们
- 元素在浏览器中具有默认的表示形式,让用户知道它们是链接,而无需任何其他脚本或样式支持
- 不同的浏览器显示链接可能略有不同,因此用户习惯于看到它们以浏览器呈现的特定方式运行。脚本化和样式化的其他元素可能会以不熟悉的方式呈现给至少某些用户。
- 浏览器提供了支持 A 元素链接的功能,例如链接之间的选项卡导航和页面中单独的链接列表。
- 屏幕阅读器和其他辅助功能支持机制可以理解 A 元素链接,并可以将其呈现给用户
- 浏览器通常会向用户显示 A 元素链接的目标,以便他们决定是否关注该链接
- 元素 URL 可以轻松复制和共享,而无需点击链接
- 元素可用于创建书签,而无需点击链接
脚本化和样式化链接不具备上述任何功能,或者至少需要大量额外工作来支持其中任何功能。
如果它是一个仅限 JavaScript 的链接,那么你附加它是什么元素并不重要,但使用 a 会给你内置的链接/悬停/访问样式,同时在语义上是正确的。但是,使用实际链接的最大原因是能够为未启用 JS 的浏览器提供回退。<a>
例如,如果可能的话,你可以有一个链接,如果可能的话,它通过ajax加载接下来的10个结果,或者如果遵循该链接,则在服务器端加载。
<a id="nextByAjax" href="?next=10">Next 10</a>
评论
return false
preventDefault()
defaultPrevented