Web 应用程序中 Javascript 绑定(bind)的用户交互元素 : a or button?

标签 javascript html web-applications

与 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 元素:abutton

这里的 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/

相关文章:

java - 在 Android 上使用 addJavascriptInterface() 传递 JavaScript 对象

javascript - 如何在您尚未进入的 View 中更改 Angular 的范围。

web-applications - 现代 Web 应用程序中密码检索的有效技术

javascript - 使用网络技术创建桌面应用程序

javascript - 在 V8 JavaScript (Chrome & Node.js) 中访问行号

html - 50% 宽度不起作用

javascript - jQuery .append() <tr> 和 <td> 在 <tr> 之外添加 <td>

python - BeautifulSoup 返回意外的额外空间

javascript - 我应该选择哪个 Google map 选项?

javascript - 在 JavaScript 中停止对特定数字的 FOR 循环