javascript - 仅需要使用 javascript 的元素的最佳实践(有限制)

Question

由于业务规则和要求，我需要一个可选项卡的元素(不使用 tabindex)，看起来像一个链接，仅具有 javascript 功能(例如，它需要对 Web 服务进行 ajax 调用) )并且它不能包含任何特殊字符，例如“#”，因为 url 末尾将包含该字符，并且该字符将被我们的防火墙阻止，由于外部法规，防火墙设置得非常严格。 此外，href 不能为空，因为我们的网站位于 Sharepoint 内部，将其保留为空意味着您将被重定向到默认登录页面。

我遇到过各种问题，这些问题都包含一些真理和论据，可以使用一个元素而不是另一个元素，但这些问题没有一个包含令人满意的答案，即使它有一个标记的答案。例如:

• Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
• Is an empty href valid?

这两个例子并不完全令人满意，因为对于第一个例子，尽管一个答案有很高的票数，但我不确定该答案是否满足上述要求。第二个确实出于同样的原因。

总而言之，在牢记限制和要求以及已知的语义和 JavaScript 最佳实践的情况下，以下哪个选项是首选？

<a href="javascript:void(0)" class="action"></a>  

或者

<a href="" class="action"></a>

或者

<a href="javascript;" class="action"></a>

或者

<button class="action"></button>

或者

<span class="action"></span>

使用(示例)ajax 调用:

<script>

    $('.action').click(function() {
        $.ajax({
            url: "test.html",
            context: document.body
            })
            .done(function() {
                $(this).addClass("done");
            });
        });
    });

</script>

如上所述，限制无法更改。期间。

Answer 1

我记得有一次老师告诉我最好是使用<a> tag ahd href 应该指向一个可能与 javascript 事件执行完全相同操作的页面。因此，如果出于任何原因，浏览器上的 javascript 被停用，用户仍然可以像任何正常网站一样使用该网站...但是这在论文上工作得很好...但是很难实现。

如果你在href上添加javascript代码或onclick您的用户将无法在新选项卡上打开链接(通过使用中间按钮或上下文菜单)...我个人讨厌在网站上...链接应该用于“链接”页面..而不是在当前页面上进行 javascript 更改，因此 <button>对我来说似乎更具语义性...

您还应该考虑搜索引擎优化(也许)，因为机器人会尝试跟踪您的索引页面链接，但它们不会跟踪按钮。 Seo 是一个灰色地带，但如果机器人有最大链接数限制，我不会感到惊讶。如果您的页面有很多仅用于 js 的链接，则机器人可能无法正确索引您的网站

最后，我宁愿使用不引人注目的 Js，所以我真的尝试将行为与表示分开。当我看到 html 和 js 在一起时我觉得很难看

所以我会选择:

<button class="action"></button>

在 JS 上有一个事件监听器...嘿..但这只是我:)

希望这有帮助