如何在jQuery中正确实现点击时禁用高亮？现有代码存在类提前移除问题

你的问题核心在于同步执行的DOM操作时序问题：在同一个点击事件回调里，你先给wrapper添加了disable-highlight类，紧接着又立刻移除了它——浏览器根本来不及在这两个同步操作之间应用这个CSS类的样式，所以高亮效果自然还是会显示出来。

我给你提供几个更合理的解决思路，比定时器更靠谱或者更优雅：

方案一：用CSS伪类直接解决（最推荐） #

既然是要禁用点击时的tap高亮，完全可以不用JS动态操作类，直接用CSS的:active伪类针对点击状态设置样式，一步到位：

/* 针对按钮点击状态设置高亮禁用 */
.wrapper .test:active {
  -webkit-tap-highlight-color: transparent;
}

对应的JS代码可以简化成只处理你的业务逻辑：

$('.test').one('click', function (e) {
  e.preventDefault();
  // 这里放你的其他业务代码
});

这种纯CSS的方式完全避开了JS的时序问题，简洁又可靠。

方案二：利用浏览器渲染周期精准移除类 #

如果因为某些原因必须用动态添加/移除类的方式，推荐用requestAnimationFrame来同步浏览器的渲染周期，而不是固定时长的定时器：

$('.test').one('click', function (e) {
  var $wrapper = $(e.target).parents('.wrapper');
  $wrapper.addClass('disable-highlight');
  e.preventDefault();
  
  // 两层requestAnimationFrame确保等当前渲染周期完成后再移除类
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      $wrapper.removeClass('disable-highlight');
    });
  });
});

第一层requestAnimationFrame等待当前帧的渲染任务完成，第二层确保浏览器已经处理完高亮相关的样式应用，这时再移除类就不会影响效果了，比定时器更精准，不会出现延迟过长或过短的问题。

方案三：用定时器兜底（简单但不够精准） #

如果你觉得上面的方法太复杂，用定时器也可以，但注意设置一个足够让浏览器处理高亮的短时长，比如100ms左右：

$('.test').one('click', function (e) {
  var $wrapper = $(e.target).parents('.wrapper');
  $wrapper.addClass('disable-highlight');
  e.preventDefault();
  
  // 延迟移除类，给浏览器足够时间应用样式
  setTimeout(() => {
    $wrapper.removeClass('disable-highlight');
  }, 100);
});

不过这种方式的缺点是不同设备的渲染速度不同，可能在某些设备上延迟过长，或者某些设备上还是不够。

内容的提问来源于stack exchange，提问作者Expert wanna be