[极致用户体验] 你的 Link Button 能让用户选择新页面打开吗？

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

1. 什么是Link Button？

我想表达的是「需要导航能力的可点击元素」（Link Button是为了方便沟通而创造的名词）

我用Link表示导航能力，用Button表示可点击元素。

什么是导航能力？

切换路由(URL)的能力。

<a>标签因为href属性，天然具备导航能力。而<button>标签没href，只能在onclick事件中，用JS控制打开新页面。

2. 用户怎么选择新页面打开？

分2种情况，你可以在掘金页面试一下：

2.1 新标签页(tab)打开

1. Command(Mac)/Ctrl(Windows) + 鼠标左键click
2. 鼠标中键click
3. 鼠标右键click，在菜单选择“在新标签页中打开链接”
4. （无障碍）通过Tab，选中链接时，按Command(Mac)/Ctrl(Windows) + 回车键Enter

2.2 新窗口(window)打开

1. Shift + 鼠标左键click
2. 鼠标右键click，在菜单选择“在窗口中打开链接”
3. （无障碍）通过Tab，选中链接时，按Shift + 回车键Enter

3. 什么是极致的用户体验？

一切导航功能，都应该给用户完整的『新窗口』打开能力。

只要你的按钮会导致页面切换，就应该允许用户用1.2提到的任意方式，在新页面打开。

4. 如何优雅的实现“Link Button”

4.1 新手方案：<button>+onclick

我刚学前端时，常常喜欢用<button>实现导航功能，只要在onclick里写window.open(url)或window.document.href = url或window.location.replace(URL)就好了。

缺点很明显

1. 用户根本无法选择在