WinForms TreeView双击节点时层级勾选/取消勾选功能失效修复咨询

这问题我之前做树形勾选组件的时候也碰到过，核心原因有两个：一是双击会触发两次单击事件，导致逻辑混乱；二是双击时没有复用单击的父子节点同步逻辑，另外卡顿大概率是因为重复DOM操作或事件绑定过多。下面给你一套完整的解决方案，完美匹配你的需求：

1. 抽离核心同步逻辑 #

先把同步子节点、父节点的逻辑单独封装成函数，这样不管单击还是双击，都能复用同一套逻辑，避免重复代码：

// 同步当前节点的所有子节点状态
function syncChildNodes(parentLi, isChecked) {
  // 用:scope限制查找范围，只找当前节点下的直接子checkbox，提升性能
  const childCheckboxes = parentLi.querySelectorAll(':scope > ul > li > input[type="checkbox"]');
  
  childCheckboxes.forEach(checkbox => {
    checkbox.checked = isChecked;
    // 递归同步子节点的下一级子节点
    syncChildNodes(checkbox.closest('li'), isChecked);
  });
}

// 同步当前节点的所有父节点状态
function syncParentNodes(currentCheckbox) {
  const parentLi = currentCheckbox.closest('li').parentNode.closest('li');
  if (!parentLi) return; // 已经到根节点，终止递归
  
  const parentCheckbox = parentLi.querySelector('input[type="checkbox"]');
  // 检查父节点下是否还有任意子节点被勾选
  const hasCheckedChild = Array.from(parentLi.querySelectorAll(':scope > ul > li > input[type="checkbox"]'))
    .some(cb => cb.checked);
  
  parentCheckbox.checked = hasCheckedChild;
  // 递归同步更上层的父节点
  syncParentNodes(parentCheckbox);
}

// 统一处理状态变更的入口函数
function handleCheckboxStateChange(checkbox) {
  const isChecked = checkbox.checked;
  // 先同步所有子节点
  syncChildNodes(checkbox.closest('li'), isChecked);
  // 再同步所有父节点
  syncParentNodes(checkbox);
}

2. 区分单双击事件，避免冲突 #

双击事件会触发两次单击，所以我们用定时器来区分单双击，避免逻辑重复执行，同时用事件委托减少事件绑定数量，解决卡顿问题：

let clickTimer; // 标记单击的定时器

// 替换成你的树形容器ID
const treeContainer = document.querySelector('#your-tree-container-id');

// 处理单击事件
treeContainer.addEventListener('click', (e) => {
  const checkbox = e.target.closest('li > input[type="checkbox"]');
  if (!checkbox) return; // 点击的不是checkbox，直接返回
  
  // 清除之前的定时器，防止双击时触发单击逻辑
  clearTimeout(clickTimer);
  // 延迟250ms执行，判断是否是双击（时间可根据需求调整）
  clickTimer = setTimeout(() => {
    handleCheckboxStateChange(checkbox);
  }, 250);
});

// 处理双击事件
treeContainer.addEventListener('dblclick', (e) => {
  const checkbox = e.target.closest('li > input[type="checkbox"]');
  if (!checkbox) return;
  
  // 取消单击的定时器，避免重复执行
  clearTimeout(clickTimer);
  // 手动切换当前checkbox的状态（双击默认不会触发checkbox状态切换）
  checkbox.checked = !checkbox.checked;
  // 执行同步逻辑
  handleCheckboxStateChange(checkbox);
});

3. 效果验证 #

现在测试你提到的场景：双击取消L节点的勾选：

1. L节点的checkbox被切换为未勾选
2. syncChildNodes会递归把L的所有子节点（比如T）都设为未勾选
3. syncParentNodes会向上检查父节点G：G的所有子节点都未勾选，所以G的checkbox也被取消
4. 继续向上检查A节点：如果A的所有子节点都未勾选，A的checkbox也会被取消
   完全符合你的预期，同时事件委托的方式也避免了大量节点绑定事件导致的卡顿。

内容的提问来源于stack exchange，提问作者user366312