Stimulus 控制器动作在点击 时被触发两次，是 HTML 原生 元素的行为所致：点击 label 会自动转发 click 事件到其关联的 ，造成事件冒泡叠加。本文详解原理、验证方法及推荐修复方案。
stimulus 控制器动作在点击 `
在使用 Stimulus 构建交互式表单（尤其是单选/复选控件）时，你可能会遇到一个看似诡异的现象：为 <label></label> 元素绑定 data-action="click->radio-button#markAsChecked" 后，仅一次点击却触发了两次控制器方法调用。例如：
<label data-controller="radio-button" data-action="click->radio-button#markAsChecked:stop"> <input type="radio" value="public" name="destination[access_type]"></label>
控制台输出：
- public - public
这并非 Stimulus 重复加载或事件监听器重复注册导致，而是 HTML 规范定义的 <label></label> 原生行为：当用户点击 label（无论是否含 for 属性），浏览器会自动触发一次对内部或关联 <input> 元素的 click 事件。这意味着：
- 点击
<label></label>→ 触发 label 上的click事件（Stimulus 捕获并执行markAsChecked）； - 浏览器紧接着 → 在
<input>上模拟一次click事件（若该 input 也在同一控制器作用域内，且未显式阻止传播，则可能再次匹配并执行相同 action）。
⚠️ 注意：你的当前结构中，<input> 是 <label></label> 的子元素，且未单独设置 data-action，但 Stimulus 的事件委托机制仍可能因 DOM 结构和事件冒泡路径，在某些情况下（如 controller 范围过大或未精确隔离 target）导致二次触发 —— 但根本诱因仍是 label 的双事件特性。
✅ 正确解法：将 action 绑定到 <input>，而非 <label></label>
最简洁、语义清晰且符合规范的修复方式是移除 label 上的 data-action，改将其绑定到 <input> 元素本身：
<div class="flex flex-1 gap-x-8 justify-start">
<label>
<input type="radio" value="public" name="destination[access_type]" id="destination_access_type_public" data-controller="radio-button" data-action="click->radio-button#markAsChecked">
Public
</label>
<label>
<input type="radio" value="private" name="destination[access_type]" id="destination_access_type_private" data-controller="radio-button" data-action="click->radio-button#markAsChecked">
Private
</label>
<label>
<input type="radio" value="backend" name="destination[access_type]" id="destination_access_type_backend" data-controller="radio-button" data-action="click->radio-button#markAsChecked">
Backend
</label>
</div>
同时，更新控制器以安全获取值（避免 querySelector 失败）：
// app/javascript/controllers/radio_button_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static classes = ["active", "inactive", "invisible"]
connect() {
const input = this.element
console.log("connected to radio:", input.value)
}
markAsChecked(event) {
// event.target 是 input 元素，无需再 querySelector
console.log("-", this.element.value)
// ✅ 此时每次点击 label 或 input 都只触发一次
}
}
? 验证技巧：在浏览器控制台运行
temp1.click()（temp1为 label）仍会输出两次；但temp2.click()（temp2为 input）仅输出一次 —— 这正印证了 label 的双重事件本质。
⚠️ 补充说明与最佳实践
-
不要依赖
event.stopPropagation()治标不治本：你在markAsChecked中调用了event.stopPropagation()，但它只能阻止当前事件在 DOM 树中的向上冒泡，无法阻止浏览器对<input>的自动 click 派发（这是独立事件，非冒泡产生）。 -
:stop修饰符等效于stopPropagation，同样无效于该场景。 - 若需保留 label 的可点击区域优势（提升移动端点击体验），上述「action 移至 input」方案完全兼容：点击 label 文字或空白区，依然会聚焦并触发其子 input 的 click 事件。
- 如需在 controller 中区分触发源，可通过
event.target判断（label 点击时 target 是 label；input 点击时 target 是 input），但本例中无需此复杂逻辑。
遵循此方案，即可彻底消除重复触发，确保每个用户交互对应唯一、可预测的 Stimulus 动作执行。
