为什么我无法在Angular版Kendo Grid中触发列菜单按钮的click事件？

问题根因 #

事件冒泡触发了Kendo列选择器的外部点击关闭逻辑。你点击自定义按钮触发列选择器弹出后，点击事件会继续向上冒泡至全局文档区域，而Kendo列选择器默认监听全局点击事件，检测到点击源不在弹窗内部就会自动关闭，因此弹窗刚渲染就被后续冒泡的点击事件触发关闭。加断点时事件冒泡流程被暂停，所以你可以看到弹窗正常显示。

解决方案 #

方案1：阻止点击事件冒泡（推荐） #

1. 修改HTML部分的点击事件绑定，传入事件对象：

<div class="mtx-col-menu-btn" (click)="columnMenuButtonClick($event)">
  <div></div>
  <div></div>
  <div></div>
</div>

2. 修改TS的事件处理函数，阻止事件冒泡：

public columnMenuButtonClick(e: MouseEvent): void {
  e.stopPropagation();
  const columnMenuButton = document.querySelector('#columnChooser button') as HTMLElement;
  columnMenuButton?.click();
}

方案2：延迟触发弹窗 #

将弹窗触发逻辑放到宏任务队列，等当前事件冒泡流程全部执行完成后再弹出弹窗：

public columnMenuButtonClick(): void {
  const columnMenuButton = document.querySelector('#columnChooser button') as HTMLElement;
  setTimeout(() => columnMenuButton?.click(), 0);
}

其他问题说明 #

• HTMLElement原生自带click()方法，开发者工具未显示是因为你查询到的元素是Kendo封装后的代理对象，属于工具显示异常，不影响实际调用。
• 如果后续出现弹窗被网格遮挡的问题，可以添加自定义CSS提升弹窗层级：

.k-column-chooser-list {
  z-index: 9999 !important;
}

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