最稳妥的跳转方式是使用<a>标签，因其原生支持点击、键盘触发及无障碍访问；若用其他元素需确保事件冒泡处理、热区尺寸≥44×44px并设置touch-action: manipulation。
直接给元素加 onclick 并设置 window.location.href 最快，但容易因事件冒泡、点击目标错位或移动端拦截失效——关键不在“能不能跳”，而在“点哪都算数”。
用 <a> 标签是最稳妥的跳转方式
浏览器原生支持 <a> 的点击、聚焦、键盘（Enter/Space）触发，无障碍和 SEO 也无额外成本。不要为了“不是链接”而硬改用 <div> + onclick。
-
href必须是有效 URL（含协议）或锚点（如#section2），空字符串href=""或javascript:void(0)会破坏语义，且部分屏幕阅读器不识别为可跳转元素 - 需要新标签页时，加
target="_blank"同时必须配rel="noopener"，否则有安全风险 - 若想隐藏下划线又保留手型光标，CSS 写
text-decoration: none; cursor: pointer;，别删<a>标签本身
onclick 触发跳转时，event.target 常被误判
给父容器（如 <div class="card">）加 onclick，用户点到内部文字、图标甚至空白 padding 区域，理论上都该跳转——但实际常因事件目标不是该 <div> 而失效。
- 务必在 JS 中用
event.target.closest('.card')判断点击是否落在目标区域内，而不是依赖this或event.currentTarget的绑定位置 - 避免在子元素上写
onclick="event.stopPropagation()"，这会切断冒泡，让父级监听收不到事件 - 移动端 Safari 对非
<a>元素的点击热区更敏感，若父容器有overflow: hidden或border-radius，视觉可见区域可能超出可点击范围
用 <label> 包裹按钮或自定义区域实现“伪链接”跳转
当设计要求点击整块卡片、行或带图标的按钮跳转，又不想暴露 <a> 标签结构时，<label> 是少数几个能天然扩大点击区域且无需 JS 的语义化方案。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 把跳转逻辑封装进函数，再由
<label>的onclick调用：<label onclick="goTo('/profile')">...</label> - 确保该
<label>不包裹任何表单控件（如<input>），否则会触发默认表单行为干扰跳转 - 不能依赖
for属性关联外部 input —— 那只会聚焦控件，不会自动执行跳转逻辑
移动端点击无响应？先查 touch-action 和父级 pointer-events
iOS Safari 和部分安卓 WebView 会静默忽略非 <a> 元素的点击，尤其当区域小、有缩放或事件被截断时。
- 给可点击容器加
style="touch-action: manipulation;"，明确告诉浏览器这是用于点击/轻触的操作区域 - 检查所有父级是否意外设置了
pointer-events: none，哪怕只有一层，整个子树都会失效 - 热区尺寸建议 ≥ 44×44px（iOS 最小触控标准），仅靠
font-size或line-height撑开高度不可靠；优先用padding+display: inline-block控制真实响应区域
真正难的不是“怎么跳”，而是“点哪都算数”——这取决于你是否控制了事件捕获路径、热区物理尺寸和移动端的 touch 行为声明。别省那几行 CSS，它们比 JS 逻辑更容易出问题。
