本文介绍如何通过事件委托精准捕获对特定 HTML 父容器（如 data-field-name="accessLevels"）的点击，并立即将其内部所有输入框设为只读，避免误触发或延迟生效问题。核心在于正确绑定事件目标、过滤子元素冒泡干扰，并使用 prop('readonly', true) 安全禁用编辑能力。
本文介绍如何通过事件委托精准捕获对特定 html 父容器（如 `data-field-name="accesslevels"`）的点击，并**立即**将其内部所有输入框设为只读，避免误触发或延迟生效问题。核心在于正确绑定事件目标、过滤子元素冒泡干扰，并使用 `prop('readonly', true)` 安全禁用编辑能力。
在构建动态表单时，常需根据用户交互（例如点击某个配置区块）实时切换字段的可编辑状态。你遇到的问题非常典型：原代码将事件监听器绑定在 <input> 元素上（.form-field__editor），导致只有点击输入框本身才会触发 readonly 设置——而需求是点击整个父区块（如 .party-group[data-field-name="accessLevels"]）时，立即锁定其下所有输入项。
根本原因在于事件委托的目标错位与事件冒泡未被合理控制。以下为专业、健壮的解决方案：
✅ 正确做法：监听父容器，严格限定触发源
$(document).on('click', 'div[data-field-name="accessLevels"]', function(e) {
// 关键：仅当点击的是父容器自身（而非其任意子元素）时才执行
if (e.target !== this) {
return;
}
// 立即对其内部所有 .form-field__editor 输入框设置只读
$(this).find('.form-field__editor').prop('readonly', true);
});
-
e.target !== this是核心防护逻辑：确保点击事件源自该div[data-field-name="accessLevels"]元素本身，而非其子标签（如<label></label>、<span></span>或已存在的<input>）。这避免了因子元素点击导致的重复/无效执行。 - 使用
$(this).find(...)替代全局选择器$('div[data-field-name="accessLevels"] ...')，提升性能与作用域准确性，尤其在页面存在多个同名字段时可避免误操作。 -
prop('readonly', true)比attr('readonly', 'readonly')更可靠，它直接修改 DOM 属性状态，兼容所有现代浏览器，并能真实反映控件的可编辑性（readonly是布尔属性，应通过prop控制）。
⚠️ 注意事项与增强建议
-
视觉反馈同步：仅设
readonly不会改变样式。建议配合 CSS 提升用户体验：div[data-field-name="accessLevels"] .form-field__editor[readonly] { background-color: #f5f5f5; border-color: #ddd; cursor: not-allowed; } -
防止多次重复设置：若业务允许反复切换编辑/只读状态，可在触发前先重置：
$(this).find('.form-field__editor').prop('readonly', false).prop('readonly', true); -
扩展性考虑：如需支持
textarea或select，可扩展选择器：$(this).find('.form-field__editor, textarea, select').prop('readonly', true);
此方案彻底解决“点击后无响应”“需二次点击输入框才生效”等常见陷阱，符合前端工程化中事件精确控制与状态即时同步的最佳实践。
