Hey there, let's work through how to turn off 3D Touch for your cross-platform React app (desktop + mobile) targeting iOS 6s and newer devices. I'll tailor the solution specifically to your existing <a> tag and NavLink code snippets, plus add robust CSS and JS fallbacks for edge cases.

一、全局CSS优先方案 #

The most straightforward and reliable approach is using CSS to override default touch behaviors—this works for most iOS versions. Add these styles to your global CSS file:

/* 针对所有可交互的链接和按钮元素 */
a, [role="button"] {
  /* 禁用浏览器默认的高级触摸行为，包括3D Touch的按压预览与菜单 */
  touch-action: manipulation;
  /* 额外移除长按弹出的默认链接菜单，进一步阻断3D Touch触发路径 */
  -webkit-touch-callout: none;
}

What this does: touch-action: manipulation tells the browser to only allow basic touch actions (like panning and pinching) and blocks advanced ones like 3D Touch. The -webkit-touch-callout property eliminates that long-press menu on links, which is often tied to 3D Touch functionality.

二、适配你的a标签代码 #

For your existing <a> tag snippet, you can add the touchAction attribute directly (React translates this to the HTML touch-action attribute) or use inline styles to enforce the rule, even if global CSS gets overridden:

navLinks = <a 
  key={item.label + i} 
  href={HomePageURL + item.navTo} 
  role="button" 
  target="_self"
  touchAction="manipulation" // 直接添加这个属性
> {item.label} </a>

Or with inline styles for extra certainty:

navLinks = <a 
  key={item.label + i} 
  href={HomePageURL + item.navTo} 
  role="button" 
  target="_self"
  style={{ 
    touchAction: 'manipulation',
    WebkitTouchCallout: 'none'
  }}
> {item.label} </a>

三、适配NavLink组件 #

Since React Router's NavLink renders an <a> tag under the hood, you can pass the same touchAction attribute or style props directly to it:

navLinks = <NavLink 
  key={item.label + i} 
  to={item.navTo} 
  target="_self"
  touchAction="manipulation"
  style={{ WebkitTouchCallout: 'none' }}
> {item.label} </NavLink>

Alternatively, you can target all NavLink-generated links in your global CSS to avoid adding props to every instance:

/* 匹配React Router NavLink生成的相对路径链接 */
a[href^="/"] {
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

四、JavaScript兜底方案（如果CSS失效） #

If you run into edge cases where CSS doesn't work on certain iOS versions, you can add touch event listeners to block the default behavior. Just be careful with this—it can interfere with normal clicks if not handled right, so use it as a fallback only:

// 封装一个简单的事件处理函数
const block3DTouch = (e) => {
  // 阻止默认触摸行为，包括3D Touch触发
  e.preventDefault();
};

// 应用到你的a标签
navLinks = <a 
  key={item.label + i} 
  href={HomePageURL + item.navTo} 
  role="button" 
  target="_self"
  onTouchStart={block3DTouch}
  onTouchMove={block3DTouch}
> {item.label} </a>

For NavLink, you can pass the same event handlers just like you would with a regular <a> tag.

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