如何移除/禁用(Ionic) Capacitor中的视觉反馈？

iOS 端处理 #

你遇到的iOS深色覆盖层是WKWebView的默认点击高亮效果，all: unset无法覆盖这个WebView原生行为，需要通过CSS专门禁用：

button, input {
  -webkit-tap-highlight-color: transparent;
}

这个属性直接将点击高亮的颜色设为透明，就能完全消除那个短暂的深色覆盖层。

Android 端处理 #

Android上的视觉反馈一般是原生的波纹（Ripple）效果，同样可以通过两种方式禁用：

1. CSS 方式：添加以下样式阻止原生触摸反馈触发：

button, input {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

touch-action: manipulation会告诉浏览器跳过触摸交互的默认行为，包括波纹反馈。

2. Capacitor 配置方式：如果CSS不生效，可以修改capacitor.config.ts配置WebView的原生设置：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: '你的应用ID',
  appName: '你的应用名称',
  webDir: 'www',
  bundledWebRuntime: false,
  android: {
    webView: {
      settings: {
        // 禁用触觉反馈和指针交互效果
        setHapticFeedbackEnabled: false,
        disablePointerIcon: true
      }
    }
  }
};

export default config;

修改后重新构建Android项目即可生效。

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