模拟无hover设备时按钮首次点击无法添加active类的解决求助

在触摸设备（如移动端）上，首次点击按钮会先后触发hover（mouseenter）和click两个事件。你的代码中，hover和click逻辑都调用了toggleClass("active")，相当于首次点击执行了两次状态切换：hover添加active类，紧接着click又移除该类，最终状态和初始一致，看起来像是没生效。第二次及之后点击时，触摸设备不会再触发hover事件，所以click的切换逻辑能正常工作。

方法1：调整hover交互逻辑（推荐，符合常规用户习惯） #

将hover的toggleClass拆分为鼠标移入添加、移出移除active类，这样hover仅作为临时视觉反馈，点击负责切换持久状态：

const button = document.querySelector(".button");

$(button).on('click', function(e) {
  e.preventDefault();
  $(this).toggleClass("active");
});

// 替换原hover逻辑，改为移入添加、移出移除
$(button).hover(
  function() { $(this).addClass("active"); },
  function() { $(this).removeClass("active"); }
);

方法2：在触摸设备上禁用hover事件 #

如果你的需求是hover和点击都要切换状态（而非临时激活），可以通过检测触摸设备，只在非触摸设备上绑定hover事件：

const button = document.querySelector(".button");

$(button).on('click', function(e) {
  e.preventDefault();
  $(this).toggleClass("active");
});

// 仅在不支持触摸的设备上绑定hover切换逻辑
if (!('ontouchstart' in window)) {
  $(button).hover(function() {
    $(this).toggleClass("active");
  });
}

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