右键菜单中的新标签页打开选项只对链接有意义
别名: 新标签打开 · 右键链接 · context menu href
概念解释
浏览器给链接提供「在新标签页打开」「复制链接地址」,因为链接有一个可取出的地址。按钮没有这份地址,右键菜单里这些项要么不出现,要么出现了也无意义——新标签里无法重放一次「删除」或「付款」。新标签打开只对链接有意义:它是导航契约在指针手势上的出口。把导航做成按钮,用户会去找这项命令而找不到;把动作做成链接,用户会在新标签里误触发一次动作。
机制
新标签、新窗口、复制 URL、拖到书签,都是把资源标识交给另一个容器。标识就是 href。按钮事件绑在当前文档的一次调用上,没有可传递的标识,另一容器打开后只是空白或同一应用的默认页。单页应用用按钮去 history.push 却不给可复制的 href,指针手势这一整族都会哑火,尽管视觉上像能跳。相反,<a href="#"> 或 javascript: 会让菜单出现,新标签打开的是无用地址,用户以为自己开了详情,实际是空页。菜单项的有无,是角色比外观更硬的证据。
怎么研究
对同一视觉控件分别实现为带真实 href 的链接、无 href 的按钮跳转、href="#" 的假链接。允许右键、中键、拖拽。
自变量:有无真实 href、任务是导航还是动作。 因变量:是否尝试新标签、新标签里是否得到预期资源、复制的地址能否独立打开。
禁用浏览器菜单的内嵌 WebView 测不到。要用带标准上下文菜单的桌面浏览器。
边界
下载链接的「新标签打开」可能直接开始下载,仍有意义。需要登录的资源在新标签可能掉会话,命令有意义但结果失败,应靠会话而不要拿掉菜单。移动端长按菜单项的文案不同,但「在新标签打开」同样只对有地址的对象成立。按钮打开的模态里再放链接,那条链接才重新获得菜单。
怎么落地
- 凡是希望被新标签、复制、分享的,给真实 href 的链接,不要用按钮去推路由。
- 动作不要用
href="#"骗出链接菜单。 - 在组件预览里右键每一个「看起来能跳」的控件,确认菜单项与真后果一致。
- 验证:中键点击。链接应在新标签打开正确资源;按钮不应打开空白标签,也不应在当前页误执行动作。