React个人页面中mailto邮件链接无法在新标签页打开的问题

问题根源 #

1. mailto协议的特性限制：浏览器对mailto协议的处理和普通HTTP链接不同，多数浏览器会忽略target="_blank"，直接唤起系统默认邮件客户端（本地应用或网页版），不会强制新开标签页——这是浏览器的默认行为，并非代码错误。
2. 语义嵌套问题：HTML规范禁止在<a>标签内嵌套交互式元素（比如<button>），这种非法嵌套会干扰浏览器的事件处理逻辑，可能导致链接行为异常。

解决方案 #

方案一：修正语义结构，用a标签模拟按钮样式

把按钮的样式直接应用到<a>标签上，既符合HTML语义，又能保证链接行为正常：

<a href="mailto:your-email@example.com" target="_blank" className="card2">
  <FontAwesomeIcon className={'email'} icon={faEnvelope} size={'2x'}/>
</a>

• 效果说明：桌面端若默认邮件客户端是网页版（如Gmail），会新开标签页打开写信界面；若为本地客户端（如Outlook），则直接唤起客户端。移动端会直接唤起系统邮件应用，这是mailto协议的标准表现。

方案二：强制打开网页版邮箱（按需使用）

如果必须强制在新标签页打开网页版邮箱，可以跳过mailto协议，直接打开对应邮箱的写信链接，示例以Gmail为例：

<button className="card2" onClick={() => {
  window.open('https://mail.google.com/mail/?view=cm&fs=1&to=your-email@example.com', '_blank');
}}>
  <FontAwesomeIcon className={'email'} icon={faEnvelope} size={'2x'}/>
</button>

• 注意：这种方式绑定了特定邮箱服务，用户若使用其他邮箱（如Outlook、Yahoo），体验会受限，需根据场景选择。

额外注意 #

• 永远不要在<a>标签内嵌套<button>，违反语义规范会引发兼容性和事件处理问题。
• mailto的最终行为由浏览器和用户的系统设置决定，无法完全统一所有场景的表现，这是正常的平台差异。

内容的提问来源于stack exchange，提问作者Kishan