Safari及iOS系统下Material button首次点击触发pointer up问题求解决方案

问题根因 #

该异常由iOS Safari的原生触控事件校验逻辑与Material Button的点击状态初始化逻辑冲突导致：
iOS Safari默认对可交互元素保留300ms双击缩放校验延迟，首次点击Material Button时，组件尚未完成点击态初始化，会直接中断pointerdown到click的完整事件流，仅保留pointerup事件回调；首次点击完成后组件状态初始化完成，后续点击事件流即可正常触发。

修复方案 #

• 方案一：调整viewport配置消除300ms延迟
  在页面<head>标签中添加如下viewport配置，禁用页面缩放能力从根源消除校验延迟：

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  

• 方案二：添加触控行为限制CSS属性
  给Material Button添加touch-action: manipulation属性，告知浏览器无需对该元素做双击缩放校验，直接放行完整事件流：

  /* 替换选择器为实际使用的Material按钮类名 */
  .mdc-button {
    touch-action: manipulation;
  }
  

• 方案三：主动拦截pointerdown默认行为（旧版本iOS兜底）
  为按钮绑定pointerdown事件阻止默认浏览器校验逻辑，不影响事件冒泡：

  document.querySelectorAll('.mdc-button').forEach(btn => {
    btn.addEventListener('pointerdown', e => e.preventDefault())
  })
  

• 方案四：升级Material组件库
  Material Design Components v14.0及以上稳定版本已内置iOS Safari事件兼容逻辑，升级后无需额外手动配置即可修复该问题。

验证方式 #

修复完成后可通过Safari Web Inspector连接iOS设备，在事件监听器面板确认按钮点击可以完整触发pointerdown、pointerup、click三类事件。

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