与 Web 应用程序中的自定义 JavaScript 行为关联的大多数用户交互元素可以是具有有意义的 href
属性值的 HTML 链接(a
元素),使它们能够在不支持 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 生成的,并且在 JavaScript 不可用时没有任何意义。
对于这些,因为我希望用户能够在任何设备上与他们交互(即我不想在 span
上自己定义鼠标、键盘、触摸……交互) > 元素),我看到两个相关的 HTML 元素:a
和 button
。
这里的 a
元素的问题是它至少定义了一种我不想要的行为:用户能够在他想要的任何地方打开其目标(例如在新选项卡中) ),而我想要进行的交互是特定于当前选项卡的。
我对 button
元素的问题是,据我从在线资源可以看出,很难在所有现代浏览器上可靠地设置样式(但我不确定它是否是现在仍然如此)。
这个问题的一些方面已经在其他地方得到了解答,但我找不到全面且最新的摘要:您建议使用什么 HTML 元素?
最佳答案
如果您希望元素在语义上成为按钮,而不会出现 <button>
的样式问题<a href>
的元素或行为元素,那么你应该使用 [role="button"]
的元素。 <span>
很常用,但几乎任何元素都可以使用。
<span role="button"></span>
现在,[role="button"]
实际上只是辅助技术的一个标志,因此需要设置一些交互来作为按钮进行 react ,但它们实际上非常简单。
按钮(例如链接和表单元素)通常是可选项卡的。这并不总是必要的,例如如果已经为其设置了键盘快捷键。如果您想要<span>
在 Tab 键顺序中,只需添加 [tabindex]
属性:
<span role="button" tabindex="0"></span>
现在您可以通过 tab 切换到该按钮,但您可能仍想触发 click
按下 Enter 和/或 Space 时发生的事件。
只需向按钮添加事件监听器就足够了。
为简洁起见,此示例使用 jQuery:$(document).on('keydown', 'span[role="button"]', function (e) {
if (e.which === 13 || e.which === 32) {
$(this).click();
e.preventDefault();
}
});
这使用事件委托(delegate)格式为所有带有 [role="button"] 的跨度提供点击支持,您可能需要根据自己的情况选择不同的选择器。
现在剩下的就是监听按钮被点击的时间:
再次,jQuery:$('.myButtonClass').click(function () {
...do stuff...
});
现在,对于其他设备,您需要触发一次点击,例如 touch
事件。如果您使用 jQuery,有各种库可以支持转动 touch
进入click
和/或 tap
。如果您不使用 jQuery,那么监听 touch
events 并不需要太多工作。 .
我不会提供处理触摸的代码示例,但那是因为它取决于按钮应该执行的操作。在某些情况下,您希望通过开始触摸按钮来触发处理程序(相当于 mousedown
),在其他情况下,您希望在启动并停止触摸时触发处理程序同一元素上的事件(类似于 click
正常工作的方式)。
关于Web 应用程序中 Javascript 绑定(bind)的用户交互元素 : a or button?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13418743/