原生 <button> 本身无分享能力，仅作触发器；真正执行分享的是 navigator.share()，其调用必须满足用户手势触发、HTTPS 环境及浏览器支持三条件，缺一即静默失败或报错。
为什么原生 <button> 在分享场景下不直接可用
原生 <button> 本身没有分享能力，它只是个触发器。真正执行分享的是 navigator.share() API，而这个 API 要求调用必须是用户手势（如 click）触发、且页面需运行在 HTTPS 环境下。很多开发者把 <button> 当成“分享按钮”直接写死样式，结果发现点击无反应——大概率是没加 JS 绑定，或漏了 async 条件判断。
重构重点不是“换外观”，而是让按钮既可样式定制，又不破坏分享逻辑的触发链路。
如何用 CSS 完全接管 <button> 样式但保留语义和可访问性
重置默认样式时，别用 all: unset —— 它会抹掉 focus outline、disabled 状态、键盘导航支持等关键可访问性行为。稳妥做法是逐项覆盖：
-
border、background、padding、font等视觉属性显式设值 - 保留
outline: none仅在:focus-visible下替换为自定义焦点样式（比如box-shadow） - 用
cursor: pointer和user-select: none避免误操作感 - 对
:disabled状态单独设置opacity和pointer-events: none，别只靠灰度
示例关键片段：
立即学习“前端免费学习笔记（深入）”；
share-btn {
border: none;
background: #007bff;
color: white;
padding: 8px 16px;
font: inherit;
cursor: pointer;
}
share-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
share-btn:disabled {
opacity: 0.6;
pointer-events: none;
}
navigator.share() 调用前必须检查的三个条件
不检查就调用，90% 的情况会在控制台报错 DOMException: Share API not available 或静默失败。必须同步验证：
-
if ('share' in navigator)—— 浏览器是否支持该 API（Safari 目前仍不支持） -
document.hasFocus()—— 页面是否处于活跃 tab（切到其他 tab 再切回来，焦点可能丢失） -
event.isTrusted—— 确保是真实用户点击，而非 JS 模拟触发（否则被浏览器拦截）
实际绑定建议这样写：
shareBtn.addEventListener('click', async (e) => {
if (!e.isTrusted) return;
if (!('share' in navigator)) {
fallbackToCopyLink();
return;
}
try {
await navigator.share({ title, text, url });
} catch (err) {
if (err.name !== 'AbortError') console.error(err);
}
});
移动端真机调试时容易忽略的兼容细节
开发时在桌面 Chrome 模拟器里能跑，一上真机就失效，常见原因有：
- Android WebView 版本太老（
Chrome < 77不支持navigator.share） - URL 含中文或特殊字符未
encodeURIComponent，部分 Android 厂商定制系统会解析失败 - 分享内容中
url必须是当前源（same-origin）或 HTTPS 协议，HTTP 页面即使本地测试也会被拒绝 - 某些安卓机型（如华为 EMUI）对
title字段长度敏感，超 32 字可能截断或报错
最稳妥的 fallback 是：检测失败后，自动复制链接到剪贴板 + 提示“已复制”，而不是跳转新页面或弹 alert。
重构按钮的核心不在“像不像原生”，而在“能不能稳稳触发分享”。样式可以任意改，但触发路径不能绕过用户手势、HTTPS、API 支持这三道坎。真机测试别省，尤其要关掉开发者工具再点一次——很多问题只在纯净环境下暴露。
