锚标签的正确使用是什么？

Question

我已经读过锚标记是如何神圣的，它不应该与 javascript 一起使用：

Popup

它应该仅用于指向另一个页面的链接：

带我去那里

所以javascript中锚标记的正确用法是什么？我应该使用：

Energize!

还是其他变体？我对这个问题的不同观点感到有些困惑。如果将 href 制作为 JavaScript 片段，我是否只需要担心 SEO？或者这更像是一个适当的网络标准合规协议？

想法？希望我不是唯一一个感到困惑的人。

Answer 1

你并不孤单，雅库布；即使是最大的 WWW 公司也使用不同的方法。

然而，根据 Netscape 时代以来的经验，我不会使用 :

<a href="javascript:(alert'no!')">Popup</a>

，这可能会在某些浏览器上造成一些麻烦，例如打开空页面或破坏当前页面上的事件顺序。

然而;

<a href="#" onclick="someJsFn();">Energize!</a>

或者;

<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>

不会造成严重麻烦，可以使用。请注意，前一个可能会将滚动重置到顶部。

您应该尽可能使用有意义的链接目标和不引人注目的 JavaScript，但这在现实生活中的示例中并不总是可行。它不是一个定义的标准，而是大多数 Web 开发人员高度认可的方法。

当谈到标准时，有一个与这种情况相关的标准：

您应该考虑使用“按钮”进行输入，它并不真正将访问者发送到页面，而是执行操作。这对于 SEO 也很重要。

Answer 2

正如 @Sime 所说（这确实应该是一个答案），现在在任何 HTML 对象中直接引用 javascript 被认为是“不好的做法”。因此，在这些情况下，您可以使用“unobtrusive javascript”中列出的概念，使用 jQuery 之类的东西附加事件。

正如您提到的另一个考虑因素是搜索引擎优化和可访问性。如果 SEO 对您的网站很重要，请确保仅使用标准链接即可完全导航该网站。同样，您可以使用“unobtrusive javascript”等来管理它。

Answer 3

我总是像平常一样使用锚点（即指定一个备用网址，该网址是用户可以通过 javascript 执行操作的另一个位置，或者使用 javascript:void() / #) 然后使用 onclick 事件执行任何您想要执行的操作。

如果您担心一致性，您也可以使用 ，只需要对其进行样式设置（更改光标，也许还可以更改颜色）以使其在视觉上显而易见它是一个动作。

我认为 Facebook 是最好的例子。他们几乎所有的链接都绑定了 JavaScript，但他们也有一个“备份”页面，供那些不允许使用 JavaScript 或没有 JavaScript 的页面使用（后者在当今时代已经不太常见了）。看看一个模块的反应是否符合您的要求，看看他们是如何做到的。他们还投入了大量的工作来研究您可以从中受益的最佳实践。

Answer 4

如果有的话，您应该仅使用像 Paul 提到的不显眼的 javascript 将锚链接绑定到 javascript 方法。

这意味着，使用关注点分离并将标记保留为 html 标记：

<a id="Jolter">Energize!</a>

以及稍后的内容

<script type="text/javascript">
    $(document).ready(function(){
        $("#Jolter").click(function(){
            // doStuffHere ...
        });
    });
</script>