Telerik Angular Kendo Upload控件：响应<li>空白区域点击事件

步骤1：自定义模板并绑定点击事件 #

在Angular组件模板中，通过kendoFileSelectFileTemplate自定义上传项模板，给外层<li>绑定点击事件并传递$event和当前文件对象：

<kendo-upload>
  <ng-template kendoFileSelectFileTemplate let-file>
    <li (click)="handleListItemClick($event, file)">
      <!-- 原有模板内容 -->
      <span class="k-file-name">{{ file.name }}</span>
      <kendo-upload-action name="remove"></kendo-upload-action>
    </li>
  </ng-template>
</kendo-upload>

步骤2：TS中处理点击事件，精准判断空白区域 #

在组件TS文件中实现点击处理方法，通过event.target区分点击的是空白区域还是内部控件（比如删除按钮）：

import { Component } from '@angular/core';
import { UploadFile } from '@progress/kendo-angular-upload';

@Component({
  selector: 'app-upload-demo',
  templateUrl: './upload-demo.component.html'
})
export class UploadDemoComponent {
  handleListItemClick(event: MouseEvent, file: UploadFile): void {
    const target = event.target as HTMLElement;
    // 过滤内部操作按钮和其他子元素，仅响应li空白区域点击
    if (target.tagName === 'LI' || 
        (target.parentElement?.tagName === 'LI' && !target.classList.contains('k-upload-action'))) {
      // 这里写入你要执行的指定代码
      console.log('点击空白区域，文件信息：', file);
      // 例如打开文件预览弹窗、展示文件详情等逻辑
    }
  }
}

关键提示 #

如果模板内还有其他子元素（比如进度条、状态图标），需要根据它们的类名或标签名添加到排除条件中，避免误触发目标代码。

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