iPhone双击出现的药丸形触控显示框是什么？如何在PWA中禁用？

一、这个功能的作用 #

这是iOS系统自带的触摸位置指示器，核心用途是服务录屏、操作演示场景——比如你录屏展示APP操作时，观看者能清晰看到触摸的精准落点，不会找不到操作位置。显示期间锁定滚动，是为了避免滚动操作干扰触摸点的展示，保证演示的准确性。

二、能不能在PWA里禁用？ #

可以，有几种可行的实现方式：

• CSS配置：添加以下样式，既能移除触摸高亮，还能限制触发指示器的系统行为：

* {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

• -webkit-tap-highlight-color: transparent：去掉iOS触摸元素时的高亮效果，降低系统触发触摸指示器的概率；

• touch-action: manipulation：告知浏览器该元素仅支持缩放、滑动操作，禁用双击缩放这类可能触发指示器的默认行为。

• Web App Manifest配置：确保PWA以独立模式运行，减少系统默认行为干扰，在manifest.json中添加：

{
  "display": "standalone",
  "apple-mobile-web-app-capable": "yes"
}

• JS阻止双击默认行为：如果上述方法无效，可直接监听双击事件并阻止系统默认动作：

document.addEventListener('dblclick', (e) => {
  e.preventDefault();
}, { passive: false });

注意必须设置passive: false，否则无法阻止系统的默认双击行为。

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