与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元素:a
和button
。我在这里的
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/