移动端details标签易误触收起，因summary默认热区仅覆盖文字且toggle由touchend直驱；解法是设display:block、加padding和touch-action:manipulation，或用touchstart+preventDefault接管逻辑。

details标签在移动端为什么容易误触收起

因为<summary>默认点击热区只覆盖文字本身，不是整个行或区块；手指稍一滑动、或按住时间略长，浏览器就当成“tap+drag”组合，触发toggle事件后立刻收起，用户根本没看清内容。这不是 bug，是原生行为——移动端 touch 事件生命周期和桌面 click 不同，click有约 300ms 延迟，而toggle由touchend直接驱动，响应快但容错低。

给summary加padding和touch-action是最小成本解法

不用 JS 就能大幅降低误触率，关键是让热区变大、手势意图更明确：

• <summary>必须设display: block（否则 padding 不生效）
• 加足够 padding：padding: 16px 20px，横向留白防误划，纵向留白适配手指粗细
• 加touch-action: manipulation，告诉 iOS/Android 这是个按钮类操作，禁用双指缩放和滚动冲突
• 加cursor: pointer和user-select: none，视觉提示可点，且避免长按选中文本干扰

需要 JS 控制时，别监听 click，改用 touchstart + preventDefault

如果要完全接管展开逻辑（比如配合动画、或统一管理多个<details>），就不能依赖原生toggle事件。常见错误是绑定click再e.preventDefault()——这在移动端无效，因为click还没触发，toggle已执行。

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

正确做法是：

立即学习“前端免费学习笔记（深入）”；

• 监听touchstart，对<summary>调用e.preventDefault()，阻止原生toggle
• 立即记录e.touches[0].clientX和Date.now()
• 在touchend里判断位移是否< 10px且持续时间< 300ms，满足才手动设details.open = !details.open
• 务必给addEventListener传{ passive: false }，否则preventDefault()在 Chrome/Edge 失效

多个details共存时，“手风琴”效果必须手动遍历控制

原生<details>不支持互斥展开，JS 实现时要注意两个坑：

• 不能只靠details.open = true，得先遍历所有兄弟<details>，把它们的open全设为false，再设当前为true
• 设open = false不会触发toggle事件，所以状态同步得靠 DOM 属性读取，而不是等事件回调
• SSR 渲染后 hydration 阶段若 JS 加载慢，用户可能先点开一个，JS 后加载再强制收起其他——建议服务端不预设open，首次交互全由客户端控制

细节上最容易被忽略的是：移动端<summary>的line-height和font-size会影响实际热区高度，哪怕加了 padding，如果line-height太小，上下边缘依然点不中。测试时一定要用真机，别只信 Chrome DevTools 的模拟器。