iPad端Safari滚动后首次点击链接失效，需双击触发的问题

技术栈与核心需求 #

• 基于Next.js开发，使用Link组件实现客户端导航（保证网络电台在页面切换时持续播放）
• 用Bootstrap做样式，同时依赖其JS实现模态框、提示框等交互组件

问题现象 #

在iPad设备上，页面滚动后点击内部链接，首次点击只会出现焦点变化，必须双击才能触发页面跳转；禁用JavaScript时链接可正常单次点击跳转，但会触发页面重载，破坏电台持续播放的需求。

已尝试的方案 #

• 给原本无onClick的自定义动画按钮添加router.push()来触发跳转
• 移除自定义按钮，仅保留Bootstrap的.btn.btn-primary类实现按钮样式
• 将Link和锚点元素移出所有上下文提供者进行测试
• 启用JS时，新增的链接元素也出现同样的双击问题

可行的解决思路 #

1. 解决Bootstrap触摸事件冲突

Bootstrap的JS组件在触摸设备上可能添加了默认的触摸延迟或事件拦截，和Next.js Link的点击事件冲突。可以给链接元素添加Bootstrap内置的data-bs-no-touchy属性，跳过其触摸事件处理：

<Link href="/target-page" passHref>
  <a className="btn btn-primary" data-bs-no-touchy>
    跳转链接
  </a>
</Link>

2. 优化触摸事件响应

给链接元素添加touch-action: manipulation CSS属性，禁用浏览器默认的双击缩放等触摸行为，让点击事件直接触发：

.btn.btn-primary {
  touch-action: manipulation;
}

也可以手动绑定touchstart事件提前触发导航，避免延迟：

import Link from 'next/link'
import { useRouter } from 'next/router'

const NavLink = ({ href, children }) => {
  const router = useRouter()
  const handleTouchStart = (e) => {
    e.preventDefault()
    router.push(href)
  }
  return (
    <Link href={href} passHref>
      <a className="btn btn-primary" onTouchStart={handleTouchStart}>
        {children}
      </a>
    </Link>
  )
}

3. 修复路由切换后的Bootstrap组件初始化

Next.js客户端导航后，Bootstrap的部分组件可能没有重新初始化，导致事件绑定异常。在_app.js中监听路由变化，重新初始化Bootstrap组件：

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

export default function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const initBootstrap = () => {
      // 重新初始化所有Bootstrap工具提示
      document.querySelectorAll('[data-bs-toggle="tooltip"]')
        .forEach(el => new window.bootstrap.Tooltip(el))
      // 同理初始化模态框、提示框等组件
      document.querySelectorAll('[data-bs-toggle="modal"]')
        .forEach(el => new window.bootstrap.Modal(el))
    }

    // 初始加载和路由切换完成后都执行初始化
    initBootstrap()
    const unsubscribe = router.events.on('routeChangeComplete', initBootstrap)
    
    return unsubscribe
  }, [router])

  return <Component {...pageProps} />
}

4. 检查焦点与元素层级

确保滚动后链接元素的焦点状态正常，添加tabindex="0"属性保证元素可被聚焦，同时检查是否有其他元素（比如固定定位的导航栏）遮挡了触摸区域：

<Link href="/target-page" passHref>
  <a className="btn btn-primary" tabindex="0">
    跳转链接
  </a>
</Link>

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