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

Question

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

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

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

预先非常感谢！

Answer 1

您可以使用 class 属性，或者从 HTML5 开始，使用 自定义数据属性。

Answer 2

如果链接是“增强”链接，则其功能与通常的链接几乎相同，但以更“用户友好”的方式 - 例如导航链接，当在页面上启用 JavaScript 时，将仅重新加载页面的“内容”部分，并使用 HTML5 History API 更新页面的地址 –那么我就使用一个语义类，实际上描述链接，例如“导航”。

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

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

我相信在大多数情况下，“操作触发器”并不真正符合 a 元素的使用描述。因此，我建议使用 span 元素，该元素的样式表明它是交互的触发器。再次引用规范：

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

关于这些触发器的另一个建议：使用这行代码（文档头部

<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。从语义上讲，在某些情况下，您还可以使用表单提交元素，例如 ：例如 – 您可以触发表单提交 – 所有的“投票”/“喜欢”/“删除” “功能属于这一类。当 JS 被禁用时，实际上会提交该表单，但是当 JS 被启用时，会触发后端 API 一侧的操作。