与Web应用程序中的自定义JavaScript行为相关联的大多数用户交互元素可以是具有有意义的a属性值的HTML链接(href元素),从而使它们可以在未启用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元素:abutton

我在这里的a元素存在的问题是,它定义了至少一个我不希望的行为:用户可以在任意位置打开目标的能力(例如,在新选项卡中),而我想进行的交互发生特定于当前选项卡。

我在这里使用button元素的问题是,据我从在线资源了解到的那样,很难在所有现代浏览器上可靠地设置样式(但我不确定现在是否仍然如此)。

这个问题的某些方面已经在其他地方得到解答,但是我找不到全面而最新的摘要:您建议使用哪种HTML元素?

最佳答案

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

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


现在,[role="button"]实际上只是辅助技术的一个标志,因此需要设置一些交互以作为按钮来响应,但实际上非常简单。

按钮(例如链接和表单元素)通常是可选项的。这并非总是必要的,例如已经为其设置了键盘快捷键。如果要按Tab键顺序使用<span>,只需添加[tabindex]属性:

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


现在,您可以跳至该按钮,但是您可能仍想在按Enter和/或Space时触发click事件。

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

为简便起见,此示例使用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 events的工作并不多。

我将不提供处理触摸的代码示例,但这是因为它取决于按钮应该执行的操作。在某些情况下,您只想通过开始触摸按钮来触发处理程序(等效于mousedown),在其他情况下,如果您已在同一元素上启动和停止touch事件,就想触发处理程序(类似click的正常工作方式)。

关于javascript - Web应用程序中受Javascript约束的用户交互元素:a或按钮?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13418743/

10-11 12:50
查看更多