本文介绍如何通过事件委托精准捕获对特定 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);

此方案彻底解决“点击后无响应”“需二次点击输入框才生效”等常见陷阱，符合前端工程化中事件精确控制与状态即时同步的最佳实践。