本文讲解如何通过事件委托精准监听特定 data-field-name 容器（如 accesslevels）的点击，并在点击父级区域的瞬间将其内部所有 input 元素设为只读，避免误触子元素导致逻辑异常。
本文讲解如何通过事件委托精准监听特定 data-field-name 容器（如 accesslevels）的点击，并在点击父级区域的瞬间将其内部所有 input 元素设为只读，避免误触子元素导致逻辑异常。
在构建动态表单时，常需实现“点击某配置区块即锁定其全部字段”的交互效果。例如，当用户点击 data-field-name="accessLevels" 的外层 <div> 时，应立即将该区块内所有 <code><input> 转为不可编辑状态（而非等待用户聚焦到某个输入框后再响应）。你当前的代码：
$(document).on('click', 'div[data-field-name="accessLevels"] .form-field__editor', function() {
$('div[data-field-name="accessLevels"] .form-field__editor').prop('readonly', true);
});存在两个关键问题：
-
事件绑定目标错误：选择器绑定了
.form-field__editor（即 input 元素本身），导致只有点击输入框时才触发，违背“点击父容器即生效”的需求； - 事件冒泡干扰：若用户点击的是 label、span 或其他子元素，事件会冒泡至父级但未被拦截，可能意外触发多次或无效操作。
✅ 正确做法是：将事件委托绑定到父容器 div[data-field-name="accessLevels"]，并通过 e.target !== this 判断是否直接点击了父容器本身（而非其任意子节点），从而确保逻辑仅在预期区域点击时执行：
$(document).on('click', 'div[data-field-name="accessLevels"]', function(e) {
// 仅当点击目标就是该 div 本身时才执行（排除点击内部 label/input/span 等子元素）
if (e.target !== this) {
return;
}
// 立即禁用该区块下所有可编辑字段
$(this).find('.form-field__editor').prop('readonly', true);
});? 关键说明：
立即学习“前端免费学习笔记（深入）”；
- 使用
$(this).find(...)替代全局选择器，提升性能与作用域准确性，避免影响其他同名字段； -
e.target !== this是核心防护逻辑——this指向事件委托绑定的父元素（即div[data-field-name="accessLevels"]），而e.target是实际被点击的 DOM 节点；只有二者相等，才代表用户直接点击了该容器空白区域； - 若需视觉反馈（如灰显、加锁图标），可同步添加 CSS 类：
$(this).find('.form-field__editor').prop('readonly', true).addClass('readonly-active');
⚠️ 注意事项：
- 确保 jQuery 已加载且 DOM 已就绪（建议包裹在
$(document).ready(...)中）； - 若后续需恢复编辑，应保存原始状态或使用
removeProp('readonly')（注意：prop()设置后需用removeProp()，而非removeAttr()）； - 对于
<textarea></textarea>或<select></select>等其他表单控件，可扩展选择器：.form-field__editor, textarea, select。
此方案简洁、可靠，符合现代前端事件处理最佳实践，能精准响应设计意图。
