Angular输入框内图标点击检测：如何仅点击日历图标触发弹窗？

安全阿岳

2026-9-26

该需求完全可以实现，推荐两种实现方案如下：

方案1：调整DOM结构（推荐）

你使用的是Angular Material的matInput组件，官方原生支持后缀元素挂载，直接把日历图标抽成独立的DOM元素绑定事件即可，完全避免点击输入框主体误触发的问题，是最符合组件设计规范的实现方式。

修改后HTML代码

<mat-form-field appearance="fill">
  <input matInput formControlName="myDate" class="form-control" type="text">
  <!-- 独立日历图标，点击事件仅绑定在该元素上 -->
  <img matSuffix 
       src="/assets/calendar.png" 
       style="width:20px;margin-right:12px;cursor:pointer;" 
       (click)="openModalClendar()">
</mat-form-field>

CSS修改说明

删除原有.icon-calendar类里的背景图相关样式即可，不需要额外调整。

方案2：不修改现有DOM结构，通过点击坐标判断触发

如果不想调整现有代码结构，可以在点击事件中判断点击位置是否落在右侧图标区域，符合条件才触发弹窗。

修改后HTML代码

<input matInput formControlName="myDate" class="form-control icon-calendar" type="text" (click)="handleInputClick($event)">

新增TS逻辑代码

handleInputClick(e: MouseEvent) {
  const inputEl = e.currentTarget as HTMLInputElement;
  // 计算图标区域的横坐标范围：背景图左偏移为距右边缘12px，图标宽度20px
  const iconAreaLeftX = inputEl.clientWidth - 12 - 20;
  const iconAreaRightX = inputEl.clientWidth - 12;
  // 仅当点击落在图标区域时触发弹窗
  if (e.offsetX >= iconAreaLeftX && e.offsetX <= iconAreaRightX) {
    this.openModalClendar();
  }
}