Firefox响应式设计模式中toggleClass失效问题排查

嘿，这个问题我之前也碰到过！问题的根源在于你同时给按钮绑定了click和touchstart两个事件，在Firefox模拟iPhone用户代理的响应式模式下，这两个事件会被连续触发——相当于你点击一次按钮，toggleClass方法被执行了两次，刚加上的类立刻又被移除，视觉上就呈现出“状态自动还原”的异常效果。

你预期的是点击一次切换按钮状态，就像这张动图展示的效果：

但在响应式模式下，因为两次事件触发导致类被反复切换，实际效果就变成了点击后没有持久的状态变化，就像这张动图里的情况：

解决方案 #

有两种常见的处理方式，你可以根据需求选择：

• 方案一：移除touchstart事件，仅保留click
  现代移动端浏览器已经大幅优化了click事件的延迟问题，只绑定click事件就能兼顾桌面和移动端的需求，代码修改后如下：

  $(".heart").on('click', function(){ 
    $(this).toggleClass('liked animated bounceIn'); 
  });
  

• 方案二：保留双事件，但阻止重复触发
  如果一定要保留touchstart来追求更灵敏的移动端体验，可以在touchstart触发时阻止事件的默认行为，避免后续click事件被触发，代码如下：

  $(".heart").on('click touchstart', function(e){
    // 阻止事件默认行为，避免click事件被重复触发
    e.preventDefault();
    $(this).toggleClass('liked animated bounceIn');
  });
  

另外补充个小优化：如果你的动画类animated bounceIn只需要在状态切换时执行一次，可以结合animationend事件在动画结束后移除动画类，避免重复点击时动画效果异常：

$(".heart").on('click', function(){ 
  const $this = $(this);
  $this.toggleClass('liked');
  // 只有当添加liked类时才触发动画
  if ($this.hasClass('liked')) {
    $this.addClass('animated bounceIn');
  }
});

// 动画结束后移除动画类
$(".heart").on('animationend', function(){
  $(this).removeClass('animated bounceIn');
});

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