本文讲解如何通过事件委托精准监听指定 data-field-name 的父容器点击事件，并在点击发生时立即将其下所有输入框设为只读，避免子元素误触发，确保交互响应及时、作用范围准确。
本文讲解如何通过事件委托精准监听指定 data-field-name 的父容器点击事件，并在点击发生时立即将其下所有输入框设为只读，避免子元素误触发，确保交互响应及时、作用范围准确。
在构建动态表单时，常需根据用户操作切换字段的可编辑状态。例如，当用户点击某个权限配置区域（如 data-field-name="accessLevels" 的 <div> 容器）时，应立即将该区域内所有输入框设为不可编辑，而非等待用户聚焦到具体输入框后再响应——后者不仅体验滞后，还违背了“点击即锁定”的设计意图。<p>问题根源在于原始代码绑定的是子级 <code><input> 元素的点击事件：
$(document).on('click', 'div[data-field-name="accessLevels"] .form-field__editor', function() { ... });这导致只有当用户直接点击输入框本身时才会触发，而目标行为是：点击任意空白处（即父容器）即生效。此外，若未做事件目标校验，子元素（如 label、span 或其他嵌套节点）的点击也会冒泡触发逻辑，造成误操作。
✅ 正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 将事件监听器绑定到父容器
div[data-field-name="accessLevels"]； - 使用
e.target !== this判断点击是否发生在容器自身（而非其子元素），从而排除子节点冒泡干扰； - 在满足条件时，统一设置该容器内所有
.form-field__editor输入框为只读。
完整修复代码如下：
$(document).on('click', 'div[data-field-name="accessLevels"]', function(e) {
// 仅当点击发生在当前 div 容器自身（非子元素）时执行
if (e.target !== this) {
return;
}
// 立即禁用该区域所有编辑器输入框
$(this).find('.form-field__editor').prop('readonly', true);
});? 关键优化说明：
- 使用
$(this).find(...)替代全局选择器，提升性能且确保作用域严格限定在当前accessLevels区域； -
prop('readonly', true)比attr('readonly', 'readonly')更可靠，能正确同步 DOM 属性与 JS 属性状态； - 若需视觉反馈，可追加样式（如添加
.is-readonly类并设置background-color: #f5f5f5; cursor: not-allowed;）； - 如后续需恢复编辑，只需调用
.prop('readonly', false)并移除对应样式即可。
⚠️ 注意事项：
- 避免使用
e.stopPropagation()，它会破坏事件冒泡机制，影响其他可能依赖该事件的逻辑； - 若容器内含
<textarea></textarea>或<select></select>，需扩展选择器（如'.form-field__editor, textarea, select'）并分别处理； - 在 Vue/React 等框架中，推荐通过数据驱动控制
readonly状态，而非直接操作 DOM。
此方案兼顾准确性、性能与可维护性，是表单状态联动场景下的典型实践模式。
