Web应用程序中绑定Javascript的用户交互元素：a或按钮？

与Web应用程序中的自定义JavaScript行为相关联的大多数用户交互元素可以是HTML链接（

a

元素），具有有意义的

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>

document.getElementById（“profile”）.onclick=function（）{
return！open（this.href，“_blank”，“scrollbars=no，status=no”）；//随便什么
};

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

对于这些，由于我希望用户能够与他们在任何设备上进行交互（即，我不希望自己在

span

元素上定义鼠标、键盘、触摸等交互），因此我看到了两个相关的HTML元素：

a

和

button

我对

a

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

我对

按钮
元素的问题是，从在线资源中可以看出，很难在所有现代浏览器上可靠地设置样式（但我不确定现在是否仍然如此）

这个问题的某些方面已经在别处得到了回答，但我找不到全面的最新摘要：您建议使用什么HTML元素？
如果您希望元素在语义上是一个按钮，而不存在
元素的样式问题或
元素的行为

我不会提供一个处理触摸的代码示例，但这取决于按钮的功能。在某些情况下，您只需在按钮上开始触摸即可触发处理程序（相当于
mousedown
），在其他情况下，如果您在同一元素上启动和停止了触摸事件，则需要触发处理程序（类似于
单击
的正常工作方式）.
如果您希望元素在语义上是一个按钮，而不存在
元素的样式问题或
的行为

我不会提供一个处理触摸的代码示例，但这取决于按钮的功能。在某些情况下，您只需开始触摸按钮即可触发处理程序（相当于
mousedown
），而在其他情况下，如果您在同一元素上启动和停止了触摸事件，则需要触发处理程序（类似于
单击
的正常工作方式）。
@zzzzBov:我正在寻找一个更实用的解决方案；没有
href
属性的链接在某些用户代理中无法正常工作。@zzzzBov：我正在寻找更实用的解决方案；没有
href
属性的链接在某些用户代理中无法正常工作。浏览器对
[role]
属性的支持是偶然的，但幸运的是，不支持该属性的浏览器不会对其进行任何操作，因此使用它不会有任何风险。感谢您提供了这一非常全面的答案；我唯一不喜欢的是“从头开始”的方法：它意味着添加一个
按钮
应该具有的整个行为，而不确定是否忘记了任何东西（我不想测试所有的屏幕阅读器）；在未来的浏览器版本中添加的行为如何？我从您的回答中了解到，
按钮
的样式化仍然很痛苦？@JulienRoyer，
元素可以进行样式化，但有很多问题。此外，它们只擅长作为泛型元素。一旦你需要定制的东西，你就会反对默认的实现。浏览器对
[role]
属性的支持是一帆风顺的，但幸运的是，不支持它的浏览器不会对它做任何事情，所以使用它不会有任何风险。感谢你提供了这个非常全面的答案；我唯一不喜欢的是“从头开始”的方法：它意味着添加一个
按钮
应该具有的整个行为，而不确定是否忘记了任何东西（我不想测试所有的屏幕阅读器）；在未来的浏览器版本中添加的行为如何？我从您的回答中了解到，
按钮
的样式化仍然很痛苦？@JulienRoyer，
元素可以进行样式化，但有很多问题。此外，它们只擅长作为泛型元素。一旦您需要一些定制的东西，您就要与默认实现进行斗争。
<span role="button"></span>

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

$(document).on('keydown', 'span[role="button"]', function (e) {
    if (e.which === 13 || e.which === 32) {
        $(this).click();
        e.preventDefault();
    }
});

$('.myButtonClass').click(function () {
    ...do stuff...
});