移动端jQuery按钮点击事件部分函数未触发问题及解决方案

我之前也遇到过类似的问题，先给你吃个定心丸：移动端完全支持jQuery事件回调里的$(this)，你遇到的问题根本原因不是$(this)失效，而是同时绑定touchstart和click带来的事件冲突~

问题根源分析 #

移动端浏览器会在触发touchstart后，延迟300ms再触发click（这是历史遗留的双击缩放机制导致的）。当你同时给按钮绑定这两个事件时，会先后触发两次回调：

1. 第一次touchstart触发，你把当前按钮设为primary-btn，其他设为secondary-btn；
2. 300ms后click再次触发，又重新执行一遍类切换逻辑——这时候可能因为事件触发的上下文问题，看起来像是$(this)的代码没生效，实际是两次执行的结果互相干扰了。

解决方案1：用CSS :active伪类简化实现（你提到的优化方案） #

如果你的核心需求是让按钮在交互时显示激活状态，直接用CSS原生的:active伪类是最省心的方案，完全不需要依赖JS切换类：

.primary-btn,
.primary-btn:active,
.primary-btn:focus { 
  background-color: crimson; 
}
.secondary-btn { 
  background-color: silver; 
}
.secondary-btn:active,
.secondary-btn:focus {
  /* 可选：设置触摸/点击时的高亮效果 */
  background-color: #ccc;
}

这种方式不仅能处理触摸和点击场景，还支持键盘导航的focus状态，兼容性拉满。

解决方案2：修复JS事件绑定的冲突 #

如果你还是需要用JS来处理类切换和表单显示逻辑，可以通过以下方式避免事件冲突：

1. 阻止touchstart后的click触发：在回调里判断事件类型，若是touchstart则阻止默认行为，避免后续的click事件执行：

$(".form-type-selector").on('click touchstart', function(event) {
  // 只在touchstart时阻止默认行为，避免影响PC端的click
  if (event.type === 'touchstart') {
    event.preventDefault();
  }
  // 统一执行类切换逻辑
  $(".form-type-selector").removeClass("primary-btn").addClass("secondary-btn");
  $(this).removeClass("secondary-btn").addClass("primary-btn");
});

2. 优化代码结构，减少冗余：把重复逻辑抽成独立函数，同时根据按钮ID自动匹配对应表单，让代码更易维护：

// 切换按钮激活状态
function setActiveButton(activeBtn) {
  $(".form-type-selector").removeClass("primary-btn").addClass("secondary-btn");
  $(activeBtn).removeClass("secondary-btn").addClass("primary-btn");
}

// 切换表单显示
function showTargetForm(btnId) {
  $(".generic-div").hide();
  // 把按钮ID的"-btn"替换成"-form"，直接匹配对应表单
  $("#" + btnId.replace("-btn", "-form")).show();
}

// 统一绑定事件
$(".form-type-selector").on('click touchstart', function(event) {
  if (event.type === 'touchstart') event.preventDefault();
  setActiveButton(this);
  showTargetForm(this.id);
});

这样调整后，$(this)的指向会始终正确，也不会再出现事件冲突导致的逻辑失效问题。

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