HTML标准中不存在toggle事件，所谓“toggle节流”实为对click或keydown等触发事件的节流，需在捕获阶段阻止默认行为并共享计时器，兼顾鼠标、键盘多通道及无障碍属性同步。
toggle 事件本身不存在，别被名字带偏
HTML 标准里没有 toggle 事件。你实际遇到的，大概率是用户频繁点击某个开关类元素（比如 <button></button>、<details></details>、自定义的折叠面板触发器），导致对应逻辑被反复执行——比如反复调用 classList.toggle()、切换 aria-expanded、触发动画或 AJAX 请求。
所谓“对 toggle 做节流”，本质是对「触发 toggle 行为的事件」做节流，最常见的是 click 或 keydown（空格/回车）事件。
click 事件节流必须绕开原生冒泡链
直接给按钮加 addEventListener('click', throttle(fn, 300)) 很容易失效，因为：
- 用户快速连点时，节流函数内部的定时器可能还没清掉，但 DOM 状态（如
aria-expanded）已被多次修改，视觉和语义已错乱 - 如果按钮在
<details></details>或自定义组件内，事件冒泡路径上可能有多个监听器，节流只作用于某一层，其他层仍照常响应 -
preventDefault()和stopPropagation()在节流回调里用晚了，无法阻止默认展开/折叠行为
正确做法是：在事件捕获阶段拦截，第一时间阻止默认行为 + 节流判断：
立即学习“前端免费学习笔记（深入）”；
const toggleBtn = document.querySelector('[data-toggle]');
const throttledToggle = throttle(() => {
const target = document.querySelector(toggleBtn.dataset.target);
if (target) {
target.classList.toggle('open');
const expanded = target.classList.contains('open');
toggleBtn.setAttribute('aria-expanded', expanded);
}
}, 300);
toggleBtn.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
throttledToggle();
}, true); // 注意：true 表示捕获阶段
用 CSS :has() + pointer-events 配合更轻量
如果只是视觉折叠/展开，且目标元素支持现代 CSS（Chrome 105+、Safari 15.4+），可完全避开 JS 节流：
- 用
<details><summary></summary></details>原生标签，浏览器自带防连点保护 - 用
:has()检测状态，配合pointer-events: none禁用过渡期点击 - 例如：展开动画进行中时，给触发器加
pointer-events: none，CSS 自动生效，不依赖 JS 状态同步
这种方案无 JS 执行开销，也彻底规避了节流函数与 DOM 状态不同步的风险。
键盘触发（空格/回车）必须单独处理
仅节流 click 不够。用户用键盘操作时，keydown 事件照样高频触发，尤其空格键在 <button></button> 上会同时触发 click 和 keydown。
务必同时监听并节流：
- 检查
e.code === 'Space'或e.key === 'Enter'，避免误伤字母输入 - 对同一元素，
click和keydown节流必须共享同一个计时器实例，否则双通道触发仍会突破节流限制 - 键盘操作需额外调用
e.preventDefault()，否则空格会触发页面滚动
复杂点在于：节流不是加个函数就完事，它必须和 DOM 当前状态、无障碍属性、多输入通道（鼠标/键盘/触摸）保持严格一致。稍有疏忽，就会出现“点了没反应”“点了两次才动”“键盘能点鼠标不能”这类体验断层。
