本文详解 hyperscript 中 on click 事件作用域问题：当为 <details> 元素直接添加 `="on click..."时，事件监听器会意外绑定到所有子节点（如、嵌套），导致误触发；解决方案是将事件绑定移至标签，并通过me.parentElement精准操作目标` 元素。
本文详解 _hyperscript 中 `on click` 事件作用域问题：当为 `` 元素直接添加 `_="on click..."` 时，事件监听器会意外绑定到所有子节点（如 ``、嵌套 ``），导致误触发；解决方案是将事件绑定移至 `` 标签，并通过 `me.parentelement` 精准操作目标 `
` 元素。
在使用 _hyperscript 构建可折叠菜单（如基于 <details> 的多级导航）时，一个常见陷阱是：将 on click 声明直接写在 <details> 标签上，会导致该事件被自动委托（delegated）到其所有后代元素——包括 <summary>、<a>、甚至嵌套的 <details>。这并非 bug，而是 _hyperscript 的默认行为：它会将事件监听器附加到当前元素及其所有子节点（除非显式阻止），从而引发非预期的多次触发（例如点击子菜单项时，父级 handleMenuChanged 也被调用）。
✅ 正确做法：事件绑定到 <summary>，操作父级 <details>
应将 _="on click..." 移至 <summary> 标签内，并利用 me.parentElement 获取其直属的 <details> 容器。这样既保证点击区域语义清晰（用户点击摘要才应展开/收起），又确保逻辑只作用于目标菜单项：
jQuery点击事件遮罩弹出层可移动特效代码
下载
"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
<details id="menu-x-top">
<summary _="
on click
handleMenuChanged(me.parentElement)
init
menuLoad(me.parentElement)
">
Stop - X
</summary>
<ul>
<li><a>Signals - Should not trigger X click</a></li>
<li>
<details id="menu-y-child">
<summary _="
on click
handleMenuChanged(me.parentElement)
init
menuLoad(me.parentElement)
">
Warnings - Y (X blocked)
</summary>
<ul>
<li><a>Active - Should not trigger Y click</a></li>
<li><a>Inactive - Should not trigger Y click</a></li>
</ul>
</details>
</li>
</ul>
</details>? 关键原理说明
- <summary> 是 <details> 的唯一可交互摘要区域，用户意图明确；
- me.parentElement 在 <summary> 上下文中始终指向其包裹的 <details> 元素，安全可靠；
- _hyperscript 不再为 <details> 自身注册监听器，彻底规避子节点误捕获；
- init 块在组件挂载时立即执行，用于从 sessionStorage 恢复状态，确保初始渲染一致性。
⚠️ 注意事项
- 不要使用 halt the event's bubbling 作为补救措施：虽然能阻止冒泡，但无法根除监听器被错误附加到子节点的问题，且增加代码复杂度；
- 避免在 <details> 上混用 open 属性与 JS 控制：set this.open to 'open' 应配合原生布尔属性（推荐 set this.open to true），否则可能引发 DOM 同步异常；
- 状态持久化建议增强健壮性：在 menuLoad 中补充类型校验，防止 sessionStorage 返回非字符串值：
def menuLoad(this)
set stored = sessionStorage.getItem(this.id)
if stored is null then
sessionStorage.setItem(this.id, 'false')
set this.open to false
else
if stored is 'true' then
set this.open to true
else
set this.open to false
end
end
end通过将事件绑定精准锚定到 <summary>，你不仅能解决子节点误触发问题，还能提升代码可维护性与语义清晰度——这才是构建可扩展、可预测的 _hyperscript 导航菜单的最佳实践。
