0

大多数与 Web 应用程序中的自定义 JavaScript 行为相关的用户交互元素可以是a具有有意义的href属性值的 HTML 链接（元素），使它们能够在非 JavaScript 启用的环境中使用：

<a id="profile" href="profile">Profile</a>
<script>
  document.getElementById("profile").onclick = function() {
    return !open(this.href, "_blank", "scrollbars=no,status=no"); // whatever
  };
</script>

但是一些交互元素与 JavaScript 有着很深的联系，要么是因为它们所包含的 Web 应用程序需要 JavaScript 才能运行，要么是因为它们是由 JavaScript 生成的，当它不可用时没有任何意义。

对于那些，因为我希望用户能够与他们在任何设备上进行交互（即我不想自己定义鼠标、键盘、触摸......在span元素上的交互），我看到两个相关的 HTML 元素：a和button。

我对a这里元素的问题是它至少定义了一种我不想要的行为：用户能够在任何他想要的地方打开其目标（例如在新标签中），而我想要进行的交互是特定于当前选项卡。

我对button这里元素的问题是，据我从在线资源中得知，很难在所有现代浏览器上可靠地设置样式（但我不确定现在是否仍然如此）。

这个问题的某些方面已经在其他地方得到了解答，但我找不到全面且最新的摘要：您建议使用什么 HTML 元素？

4

1 回答 1

3

如果您希望一个元素在语义上是一个按钮，而没有元素的样式问题<button>或元素的行为<a href>，那么您应该使用带有[role="button"]. <span>是常用的，但几乎可以使用任何元素。

<span role="button"></span>

现在，[role="button"]它实际上只是辅助技术的标志，因此需要设置一些交互以作为按钮做出反应，但它们实际上很容易。

按钮（例如链接和表单元素）通常是可选项卡的。这并不总是必要的，例如如果已经为其设置了键盘快捷键。如果你想<span>在跳位顺序中，只需添加[tabindex]属性：

<span role="button" tabindex="0"></span>

现在您可以tab使用按钮，但您可能仍希望在按下和/或按下click时触发事件。EnterSpace

只需向按钮添加一个事件侦听器就足够了。

为简洁起见，此示例使用 jQuery： 
$(document).on('keydown', 'span[role="button"]', function (e) {
    if (e.which === 13 || e.which === 32) {
        $(this).click();
        e.preventDefault();
    }
});

这使用事件委托格式为具有 [role="button"] 的所有跨度提供点击支持，您可能希望根据您的情况选择不同的选择器。

现在剩下的就是在单击按钮时监听：

再次，jQuery： 
$('.myButtonClass').click(function () {
    ...do stuff...
});

现在，对于其他设备，您将要触发点击，比如说，一个touch事件。如果您使用的是 jQuery，则有各种库支持转换touch为click和/或tap. 如果您不使用 jQuery，那么监听touch事件的工作量并不大。

我不会提供处理触摸的代码示例，但那是因为它取决于按钮应该做什么。在某些情况下，您只想通过开始触摸按钮来触发处理程序mousedown（相当于一般）。click

于 2012-11-16T14:55:55.353 回答