本文介绍如何利用 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;"></pre>
<table>
<thead><tr>
<th></th>
<th>Varname</th>
</tr></thead>
<tbody _="on click toggle [@checked] on the .row-selector in event.target.closest('tr')">
<tr>
<td><input type="checkbox" name="selected-rows" class="row-selector"></td>
<td>Foo</td>
</tr>
<tr>
<td><input type="checkbox" name="selected-rows" class="row-selector"></td>
<td>Bar</td>
</tr>
<tr>
<td><input type="checkbox" name="selected-rows" class="row-selector"></td>
<td>Baz</td>
</tr>
</tbody>
</table>
<p>? <strong>注意事项与最佳实践：</strong> </p>
<ul>
<li>✅ <code>event.target.closest('tr') 是核心——它确保作用域隔离，不会误操作其他行；
.row-selector），避免 CSS 选择器冲突； <tr> 内存在嵌套可点击元素（如按钮、链接），建议为它们添加 <code>stop propagation 防止事件冒泡干扰行点击逻辑（例如：_="on click stop propagation"）； shift+click 连续选中等）。通过合理运用 Hyperscript 的事件对象与 DOM 导航能力，我们既能保持模板简洁，又能实现精准、健壮的交互逻辑。
