使用<button>或<a>打开/关闭模态更方便吗？

Question

根据我的理解,按钮用于执行功能,链接用于将用户导航到不同的页面.但是,在打开和关闭模态方面,最佳做法是什么？

<a id="testModal" href="#">Open Modal</a>

要么

<button id="testModal">Open Modal</button>

Answer 1

<button>

<a href="#">将a 更改为a <button>并将事件处理程序放在其上.

关于哪些元素属于哪里的更多上下文....

控制是否将我带到另一页？使用锚点

如果,当点击,点击或通过键盘或语音激活(或在此处插入新颖的交互方法)时,用户将被带到另一个URL(包括同一页面上的锚点),然后使用<a href="[URL]">.确保使用该href属性并且它具有真实的URL,而不是"#"(否则您可能依赖于JavaScript,这对于超链接来说根本不是必需的).如果href指向一个"#",那么你可能做错了.如果它指向一个命名锚作为渐进增强工作的一部分,那么这是完全有效的.

控件是否会改变当前页面上的内容？使用按钮

如果在激活时,用户不会从页面移动(或移动到页面中的锚点),而是显示新视图(消息框,布局更改等),然后使用a <button>.虽然你可以使用<input type="button">,但你更有可能与预先存在的样式和后续的开发人员(比如我)发生冲突.

控制提交表单字段吗？使用提交

如果在激活时,用户输入的信息(通过手动输入或通过选择屏幕上的项目)将被发送回服务器,然后使用<input type="submit">.这样可以更好地生活在一个<form>.如果您需要更多样式控件或不仅仅需要嵌入简单的文本字符串,请使用<button type="submit">替代.

键盘注意事项

想想键盘用户片刻.按Enter键可以触发超链接.但是按下回车键或空格键可以触发真正的按钮.当超链接具有焦点并且用户按下空格键时,该页面将滚动一个屏幕.如果没有更多要滚动,那么用户只会遇到任何事情.给定一组看起来相同的界面元素,如果某些界面元素使用空格键而某些界面元素不兼容,则不能指望用户对页面的行为有信心.

我认为值得一提的是,空格键触发的事件仅在释放键时触发,而使用Enter键将在您按下键(释放它之前)后立即触发事件.