本文介绍如何利用 Hyperscript 的 closest() 语义，在 上统一声明事件行为，实现点击任意表格行时仅切换该行内 .row-selector 复选框的选中状态，避免为每个 重复添加 _= 属性。

本文介绍如何利用 hyperscript 的 `closest()` 语义，在 `

` 上统一声明事件行为，实现点击任意表格行时仅切换该行内 `.row-selector` 复选框的选中状态，避免为每个 `` 重复添加 `_=` 属性。

在构建数据表格时，提升交互体验的一个常见需求是：用户点击整行（而不仅限于复选框本身）即可选中/取消选中该行对应的复选框。Hyperscript 提供了简洁的声明式语法来实现这一效果，但关键在于精准定位事件目标所在的上下文。

若将 Hyperscript 指令写在 <tbody> 上，需明确告诉它：“当点击发生时，找到被点击元素（<code>event.target）最近的父级 <tr>，然后仅操作该 <code><tr> 内的 <code>.row-selector 复选框”。这正是 event.target.closest('tr') 的作用——它从点击目标向上遍历 DOM，返回第一个匹配的 <tr> 元素（即当前被点击的行），从而确保操作范围严格限定在该行内部。<p>✅ 正确写法如下（只需在 <code><tbody> 添加一行 Hyperscript）：<pre class="brush:php;toolbar:false;">&lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;&lt;/th&gt; &lt;th&gt;Varname&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody _=&quot;on click toggle [@checked] on the .row-selector in event.target.closest('tr')&quot;&gt; &lt;tr&gt; &lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;selected-rows&quot; class=&quot;row-selector&quot;/&gt;&lt;/td&gt; &lt;td&gt;Foo&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;selected-rows&quot; class=&quot;row-selector&quot;/&gt;&lt;/td&gt; &lt;td&gt;Bar&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;input type=&quot;checkbox&quot; name=&quot;selected-rows&quot; class=&quot;row-selector&quot;/&gt;&lt;/td&gt; &lt;td&gt;Baz&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;</pre><p>? <strong>注意事项与最佳实践：</strong> </p> <ul> <li>✅ <code>event.target.closest('tr') 是核心——它确保作用域隔离，不会误操作其他行；

⚠️ 确保复选框具有唯一且稳定的类名（如 .row-selector），避免 CSS 选择器冲突；

⚠️ 若 <tr> 内存在嵌套可点击元素（如按钮、链接），建议为它们添加 <code>stop propagation 防止事件冒泡干扰行点击逻辑（例如：_="on click stop propagation"）；

✅ 此方案完全符合“一次声明、全局生效”原则，HTML 更干净、可维护性更强，也便于后续扩展（如添加 shift+click 连续选中等）。

通过合理运用 Hyperscript 的事件对象与 DOM 导航能力，我们既能保持模板简洁，又能实现精准、健壮的交互逻辑。