summary标签点击不触发click事件是浏览器原生行为，chrome、firefox、safari均拦截其click事件以专用于details展开/折叠控制；应监听details元素的toggle事件获取开合状态。

summary 标签点击后不触发 click 事件？

不是 bug，是浏览器原生行为：Chrome、Firefox、Safari 均会**拦截 summary 上的 click 事件**（除非用 event.stopPropagation() 干预），只保留对 details 的展开/折叠控制。这意味着直接在 summary 上绑 onclick 或 addEventListener('click', ...) 大概率无响应。

常见错误现象：console.log 不输出、自定义弹窗不出现、埋点未上报——本质是事件被 details 内部逻辑吞掉了。

• 必须监听 details 元素的 toggle 事件（现代浏览器支持）来感知开合状态变化
• 若需兼容旧版 Safari（summary 的 mousedown + pointerdown，并配合 setTimeout 延迟读取 open 属性
• toggle 事件不会冒泡到父级 details，但会触发在目标元素自身上

如何让 summary 支持图标旋转动画？

不能靠 JS 动态改 class 再配 CSS transition（因为开合由 UA 控制，时机不可控），得用 CSS 原生方案：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 利用 details[open] summary::after 选择器控制箭头方向，例如：

  summary::after { content: "▶"; transition: transform .2s; }<br>details[open] summary::after { transform: rotate(90deg); }

• 避免用 transform: rotate() 配合 display: block/none——后者会破坏 transition 触发条件
• 若用 SVG 图标，建议内联写进 summary 内部，再用 details[open] svg { transform: rotate(90deg); } 控制，比伪元素更可控
• 注意 Safari 对 details[open] 的样式重绘有延迟，加 will-change: transform 可缓解卡顿

嵌套 details 导致子 summary 点击失效？

深层嵌套时，外层 details 的 UA 行为可能干扰内层捕获事件，尤其当外层 summary 包含可交互子元素（如按钮、链接）时。

• 根本原因是事件路径中多个 summary 共存，浏览器优先响应最外层的折叠逻辑
• 解决方式：给内层 summary 的子元素显式设置 pointer-events: none（仅限非交互内容），或改用 div + 手动控制 open 属性（放弃原生语义）
• 若必须保留语义和嵌套，推荐监听外层 toggle 后，用 event.target.querySelector('details') 定位实际触发源，再做差异化处理
• 测试重点：iOS Safari 下三层及以上嵌套常出现 toggle 事件丢失，需加兜底轮询 open 属性变化

用 JavaScript 手动控制 open 状态反而更可靠？

是的。原生 details 的 UA 行为在移动端和跨浏览器一致性上仍有缺口，尤其涉及 SSR、hydration、动态插入等场景。

• 直接操作 element.open = true/false 是标准属性，兼容性好（IE 除外），且能绕过 UA 的点击拦截逻辑
• 搭配 requestAnimationFrame 设置状态，可避免 Safari 中因渲染队列导致的视觉不同步
• 需要自行管理键盘支持（Space / Enter 键触发），否则会丢失无障碍能力；可用 summary.setAttribute('tabindex', '0') + 监听 keydown 补全
• 注意：修改 open 属性会同步触发 toggle 事件，无需额外 dispatch

细节组件设计里最易被忽略的，其实是键盘焦点管理和 toggle 事件的竞态——比如快速连点两次，open 属性可能已变，但事件还没派发完。这时候靠轮询或 getComputedStyle 查状态都不如直接监听事件并用 event.currentTarget.open 取当前值来得稳。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！