Next.js绑定onClick实现双击图片触发likePosts在移动端失效如何解决

移动端浏览器默认不会在click事件的event.detail属性中记录点击次数，同时移动端默认双击行为为页面/元素缩放，会劫持原生点击事件，导致依赖event.detail === 2的判断逻辑完全失效。另外你使用全局变量存储计时器的写法存在多组件实例互相干扰的问题，也会导致逻辑异常。

推荐使用自定义点击间隔判断的方案，兼容性最好，不需要依赖浏览器原生的点击次数统计：

import { useRef } from 'react'

// 组件内部代码
const lastClickTime = useRef(0)

function handleClick() {
  const currentTime = Date.now()
  const clickInterval = currentTime - lastClickTime.current
  // 300ms以内的两次点击判定为双击
  if (clickInterval < 300 && clickInterval > 0) {
    likePosts()
    // 重置时间避免连续触发
    lastClickTime.current = 0
    return
  }
  lastClickTime.current = currentTime
}

// 图片绑定事件
<img 
  onClick={handleClick}
  src={img} 
  className="object-contain w-full" 
  alt="" 
/>

如果需要彻底避免移动端双击缩放的默认行为，可以做两个额外配置：

• 给图片添加CSS样式 touch-action: manipulation，告知浏览器不需要对该元素的触摸行为做额外劫持
• 在根布局的viewport元标签中添加user-scalable=no，禁止页面整体缩放

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