Chrome移动端JQuery add/remove class点击事件需二次触发才生效

1. 移动端点击延迟导致的触发时机偏差 #

移动端浏览器默认存在300ms点击延迟（用于区分点击和双击缩放操作），桌面端Chrome调试工具无此延迟，因此事件触发节奏不一致。第一次点击可能仅触发了浏览器的延迟判断逻辑，第二次才真正触发你绑定的click事件。

• 解决方式：
  • 用touchstart事件替代click，直接响应触摸动作
  • 给目标元素添加CSS：touch-action: manipulation;，禁用浏览器双击缩放行为，消除300ms延迟

2. 事件重复绑定引发的逻辑冲突 #

移动端可能因页面渲染或脚本加载顺序问题，导致click事件被重复绑定。第一次点击触发了多套逻辑，状态被反复修改后回到初始状态，第二次点击才达到预期的样式切换效果。

• 解决方式：
  • 绑定事件前先解绑，确保唯一绑定：$(selector).off('click').on('click', function() { /* 你的逻辑 */ })
  • 确保脚本在DOM完全加载后执行（比如放在$(document).ready()中），避免重复绑定

3. 移动端样式渲染的异步延迟 #

移动端GPU渲染机制和桌面端不同，addClass/removeClass后的样式更新可能存在异步延迟，第一次点击时样式未及时更新，视觉上无变化，第二次点击时状态才同步。

• 解决方式：
  • 修改类名后强制触发浏览器重排：$(element).get(0).offsetHeight;（读取元素高度会强制浏览器计算布局）
  • 用requestAnimationFrame包裹类名修改逻辑，确保在浏览器重绘前执行：

    requestAnimationFrame(() => {
      $(element).addClass('active').removeClass('inactive');
    });
    

4. 浏览器默认触摸反馈的干扰 #

部分移动端浏览器会给可点击元素添加默认触摸高亮反馈，该反馈的事件处理可能和自定义click事件产生冲突，导致第一次点击被拦截。

• 解决方式：
  • 添加CSS禁用默认触摸反馈：-webkit-tap-highlight-color: transparent;

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