onabort 是用户主动中断加载的合法信号，需直接监听做 ui 反馈，不可重试或兜底；它与 onload、onerror 并列覆盖全部加载终态，仅媒体元素支持，触发时 networkstate 为 0，应简洁处理并确保三者共存。
onabort 不是错误，也不该被“修复”——它是用户主动中断加载的合法信号，直接监听并做 UI 反馈即可，强行兜底或重试反而违背语义。
onabort 事件只在用户手动停止时触发
它和 onerror、onload 是并列但语义不同的生命周期事件：onabort 表示用户点击了浏览器的“停止”按钮、按了 Esc、或在资源加载完成前关闭了标签页。这不是失败，也不是异常，而是明确的用户意图。
- 仅对
<img>、<audio></audio>、<video></video>等媒体元素有效，<script></script>或<link>不支持 - 不会因网络超时、404、CORS 拒绝等触发——这些走的是
onerror - 现代浏览器中，
onabort触发时，元素的networkState为0（NETWORK_EMPTY），readyState通常为0或1
用 onabort 做轻量级用户反馈
它的价值在于让用户操作可感知，比如取消加载时隐藏 loading 指示器、恢复按钮状态、或记录行为用于分析。别试图“恢复加载”，那会和用户意图冲突。
- 写法要简洁：直接内联或用
addEventListener，避免复杂逻辑阻塞主线程 - 推荐内联写法（兼容性好、无依赖）：
<img src="big.jpg" onabort="this.classList.remove('loading')"> - 如果需复用逻辑，绑定时注意清除旧监听：
img.addEventListener('abort', handler, { once: true }) - 不要在
onabort里调img.src = ...重试——用户已明确放弃，再发起请求不礼貌
和 onload / onerror 的协作关系
三个事件互斥且覆盖全部加载终态：成功走 onload，失败走 onerror，用户取消走 onabort。必须三者共存才能完整覆盖。
- 常见漏掉
onabort导致的问题：loading 动画卡住、按钮持续禁用、控制台无报错但 UI 僵死 - 示例结构：
<img src="x.jpg" onload="done()" onerror="fail()" onabort="cancel()"> -
onabort和onerror都可能被 CORS 或 MIME 错误绕过——它们只响应网络层中断，不响应解析失败（如返回 HTML 却声明为 image/png）
真正容易被忽略的点是：onabort 不可被阻止，也无法被取消；它只通知，不授权干预。设计时默认把它当作“用户说了算”的终点，而不是需要补救的故障点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
