如何指示用作 js 挂钩的链接？或者 rel="js" 语义替换

Posted 2023-02-24

【中文标题】如何指示用作 js 挂钩的链接？或者 rel="js" 语义替换

【英文标题】：How to indicate links used as hooks for js? Or rel="js" semantic replacement

【发布时间】：2011-10-31 13:37:03

【问题描述】：

我正在寻找好的/语义/传递验证方式来指示我的链接，这些链接用作 javascript 的钩子。

<a href="somelink" rel="js">link</a>

据我了解，“rel”更多的是关于文档之间的关系。此外，“data-lang”（from here）感觉也不是一个足够好的解决方案。

提前非常感谢！

【问题讨论】：

问题是：您的链接是否可以在没有 JavaScript 的情况下工作（因此，使用 JavaScript，它们只是“增强”，例如允许部分重新加载页面，而不是完全刷新）或者它们是“伪-links”，并且它们仅用于支持 JS 的功能？

@gryzzly 目前我只有“伪链接”，但我想听听这两种情况的解决方案:)

【参考方案1】：

您可以使用class-属性，或者在 html5 中使用custom data-attributes。

【讨论】：

问题不在于如何将数据传递给 JavaScript。它是关于如何在标记中显示这些链接不是指向网络资源或内部锚点的链接，而仅仅是 JavaScript 触发器。

【参考方案2】：

如果链接是“增强”链接，它的作用与通常的链接几乎相同，但以更“用户友好”的方式 - 例如导航链接，当 JavaScript 启用时页面，将仅重新加载页面的“内容”部分并使用HTML5 History API 更新页面的地址——然后我将只使用语义类，实际描述链接，例如“导航”。

如果它们是 JavaScript 触发器，并且在 JavaScript 关闭时它们将无法运行 - 我建议根本不要使用 a 元素。来自spec：

如果a 元素有href 属性，那么它代表一个超链接 （超文本锚）。如果a 元素没有href 属性，则 element 表示链接可能具有的占位符 放置，如果它是相关的。

我相信在大多数情况下，“动作触发器”并不真正适合使用 a 元素的描述。因此，我建议使用span 元素，该元素的样式会暗示它是交互的触发器。再次引用spec：

span 元素本身没有任何意义，但很有用 当与全局属性一起使用时，例如class、lang 或 dir。它代表它的孩子。

关于这些触发器的另一个建议：使用这行代码（文档头部中 <title> 之后的第一件事），以便为您的 html 元素提供一个类 js：

<script>document.documentElement.className = 'js';</script>

然后在你的 CSS 中这样做：

/* 
assuming that this is your mark-up for the pseudo-links:
<span class="action-trigger">Beautiful transition</span>
*/
.action-trigger 
    display:none;
    visibility:hidden;

.js .action-trigger 
    display:inline;/* or whatever suits your styling of these elements */
    visibility:visible;

这样，当 JavaScript 被禁用时，用户将看不到需要采取行动但实际上不起作用的“伪链接”。

UPD。从语义上讲，在某些情况下，您还可以使用表单提交元素，例如<button>：作为示例——您可以触发表单提交——所有“投票”/“喜欢”/“删除”功能都属于这一类。其中，当 JS 被禁用时会真正提交该表单，但是当 JS 被启用时，会触发后端 API 一侧的操作。

【讨论】：

另一种选择是使用 JavaScript 添加 a 元素，必要时替换占位符 span 元素。不要忘记启用 JS 但关闭 CSS 的用户 ;)

从“语义”的角度来看这很好，但从性能的角度来看却没有那么好 :-) 虽然，“语义/验证器”案例并不真正适用于开发大量 JS 的网络应用程序...

在这种情况下，我更喜欢使用 ，以保留将焦点移到它上面的选项（使用选项卡）..

您可以通过将tabindex 属性添加到span: jsfiddle.net/gryzzly/nswUZ/1 来添加专注于span 的功能，但同样，为了完全模拟链接的UI，它可能需要一些试验和错误。