iOS设备上Angular按钮(click)事件无法触发问题

针对你遇到的Angular按钮在iPhone的Safari和Chrome中无法触发(click)事件的问题，以下是几种经过验证的解决思路：

1. 补充触摸事件绑定 #

iOS设备的触摸事件机制和桌面端存在差异，给按钮同时绑定(touchstart)事件可以兜底触发逻辑，注意添加防抖避免重复执行：

修改按钮模板 #

<button type="button" title="1 Month" class="btn btn-soft-secondary btn-sm ms-1" 
        [ngClass]="{ 'active': activeFilter === '1m' }" 
        (click)="applyFilters('1m')" 
        (touchstart)="applyFilters('1m')">
  1M
</button>

组件内添加防抖逻辑 #

private lastClickTime = 0;

applyFilters(filter: string): void {
  const now = Date.now();
  // 300ms内忽略重复触发
  if (now - this.lastClickTime < 300) return;
  this.lastClickTime = now;
  
  // 你的原有过滤逻辑
  this.activeFilter = filter;
  // ...其他操作
}

2. 给按钮添加可点击的CSS标识 #

iOS浏览器对没有明确交互提示的元素，可能会忽略点击事件，给按钮添加cursor: pointer样式：

.btn {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* 可选：移除点击时的高亮遮罩 */
}

3. 检查父元素的pointer-events属性 #

如果外层父元素（比如.ms-auto容器）设置了pointer-events: none，会直接阻止子按钮的点击事件，检查并确保父元素没有该属性，或者给按钮强制重置：

.btn {
  pointer-events: auto;
}

4. 确保Angular变更检测正常触发 #

少数情况下，iOS环境中Zone.js可能没有正确捕获事件，导致变更检测未执行，可以手动包裹逻辑到NgZone内：

import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {}

applyFilters(filter: string): void {
  this.ngZone.run(() => {
    this.activeFilter = filter;
    // 执行你的过滤逻辑
  });
}

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