Ionic/Angular中Event属性类型错误，如何正确定义参数类型？

问题说明 #

在Ionic项目中处理点击事件时触发类型错误，目前用any类型可临时规避，但希望采用正确的类型定义方式。

实现代码 #

TS代码

public gotoPage(event: Event): void {
  const gettest = (event.target as HTMLElement)?.getAttribute('href');
  if (href) {
    const testModule = "value1"
    if (ssoModule) {
      event.preventDefault();
    }
  }
}

HTML代码

<ion-card-content>
  <ion-item class="no-padding" (click)="gotoPage($event)">
    <div>
{{test}}
    </div>
  </ion-item>
</ion-card-content>

错误信息 #

Property 'target' does not exist on type 'Event_2'.
Property 'target' does not exist on type 'RouterEvent'.
Property 'preventDefault' does not exist on type 'Event_2'.
Property 'preventDefault' does not exist on type 'RouterEvent'.

解决方案 #

核心问题是用错了事件类型，Ionic/Angular中点击事件的正确类型应为MouseEvent（或通用的PointerEvent），而非全局Event或路由相关的RouterEvent。

具体修正： #

1. 替换事件类型：将方法参数类型从Event改为MouseEvent，若需兼容触摸操作，可改用PointerEvent。
2. 修复变量名错误：代码中存在未定义的href和ssoModule变量，需修正为实际存在的变量。

修正后的TS代码：

public gotoPage(event: MouseEvent): void {
  const href = (event.target as HTMLElement)?.getAttribute('href');
  if (href) {
    const testModule = "value1";
    if (testModule) {
      event.preventDefault();
    }
  }
}

补充说明 #

• MouseEvent包含target属性和preventDefault()方法，完全匹配点击事件需求，不会触发类型错误。
• PointerEvent兼容鼠标与触摸操作，适合需要处理多端交互的场景。
• 避免使用any类型，正确的DOM事件类型能保留TypeScript的类型校验优势，让代码更健壮。

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